ToastAndroid 是一个专为 Android 平台提供的 React Native API,用于在应用程序中显示简单的消息提示(Toast)。该 API 提供了两个方法：show() 和 dismiss(),以及常量 ToastAndroid.SHORT 和 ToastAndroid.LONG 分别表示 Toast 的短时持续时间和长时持续时间。此外，还提供了一个可选参数 gravity,用于设置 Toast 的位置。
以下是使用 ToastAndroid API 的示例代码：
```javascript
import React from 'react';
import { View, Button } from 'react-native';
import { ToastAndroid } from '@react-native-community/toast-android';
function App() {
return (
);
}
function showToast() {
ToastAndroid.show('Hello World!', ToastAndroid.SHORT, ToastAndroid.CENTER);
}
export default App;
```
在这个示例中，我们首先导入了所需的 React、React Native 组件以及 ToastAndroid API。然后，我们在 App 组件中创建了一个按钮，当点击该按钮时，会调用 showToast() 函数。showToast() 函数使用 ToastAndroid.show() 方法显示一个包含 "Hello World!" 文本的消息提示。我们将持续时间设置为 ToastAndroid.SHORT,并将位置设置为 ToastAndroid.CENTER。
以下是重构后的内容：
```javascript
import React, { Component } from 'react';
import { Button, ToastAndroid, Platform } from 'react-native';
class ToastExample extends Component {
showToast = () => {
if (Platform.OS === 'android') {
ToastAndroid.show(
'Hello, 这是一个 Toast 消息！',
ToastAndroid.SHORT,
[
{ text: 'Hello, 这是一个 Toast 消息！', position: 'center' }, // 如果你想使用 gravity 参数(在 API 级别 30 以下可能有效)
{ text: 'Hello, 这是一个 Toast 消息！', duration: ToastAndroid.LONG, position: 'bottom' },
],
true,
5000,
null
);
}
};
render() {
return (
);
}
}
export default ToastExample;
```
在 React Native 中，针对 iOS 平台，可以使用 Alert API 来显示消息提示框。Alert.alert() 方法接收四个参数：
1. Title(标题):第一个参数是提示框的标题。
2. Msg(消息):第二个参数是提示框中要显示的消息内容。
3. arr(按钮数组):第三个参数是一个数组，包含提示框中的按钮配置。每个按钮都是一个对象，具有 text(按钮文本)、onPress(点击时执行的函数)和 style(可选，用于指定按钮样式，如 'cancel')等属性。
4. option(可选配置):第四个参数是一个可选的配置对象，例如设置 cancelable 为 false,表示用户不能通过点击提示框外部来关闭它(在 iOS 上有效，Android 上默认就不能通过点击外部关闭)。
示例代码：
```javascript
const title = "My Alert Title";
const message = "Hello, 这是一个 Toast 消息！";
const buttons = [
{ text: "OK", onPress: () => {} },
];
const options = { cancelable: false };
Alert.alert(title, message, buttons, options);
```
以下是重构后的代码：
```javascript
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
class AlertExample extends Component {
showAlert = () => {
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
onPress: () => console.log('OK Pressed'),
},
],
{ cancelable: false }
);
};
render() {
return (
);
}
}
export default AlertExample;
```
