ToastAndroid 是 React Native 提供的一个特定于 Android 平台的
API,用于显示简单的消息提示(Toast)。
两个方法:
1. ToastAndroid.show(message, duration, gravity)
- message: 要显示的文本消息。
- duration: Toast 的持续时间,可以是 ToastAndroid.SHORT 或 ToastAndroid.LONG。
- gravity (可选): Toast 的位置,如 ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER。但在 Android API 级别 30(R)及更高版本中,gravity 参数可能不再起作用,因为 Android 系统可能根据设备的设置和上下文自动确定 Toast 的位置。
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);
// 如果你想使用 gravity 参数(在 API 级别 30 以下可能有效)
// ToastAndroid.show('Hello, 这是一个 Toast 消息!', ToastAndroid.LONG, ToastAndroid.CENTER);
}
};
render() {
return (
<Button
title="显示 Toast"
onPress={this.showToast}
/>
);
}
}
export default ToastExample;
2. ToastAndroid.showWithGravity(message, duration, gravity, xOffset, yOffset)
- message: 要显示的文本消息。
- duration: Toast 的持续时间,可以是 ToastAndroid.SHORT 或 ToastAndroid.LONG。
- gravity: Toast 的位置,如ToastAndroid.TOP(居上对齐),ToastAndroid.BOTTOM(居下对齐),ToastAndroid.CENTER(居中对齐)。
- xOffset: 水平偏移量。
- yOffset: 垂直偏移量。
javascript
ToastAndroid.showWithGravity(
'Hello, 这是一个 Toast 消息!',
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
0, // xOffset
50 // yOffset
);
在React Native中,对于iOS平台,使用Alert API来显示消息提示框
Alert.alert( Title,Msg,arr,option)
- Title:第一个参数是标题(Alert Title)。
- Msg:第二个参数是消息内容(My Alert Msg)。
- arr:第三个参数是一个数组,包含提示框中的按钮配置。每个按钮都是一个对象,具有text(按钮文本)、onPress(点击时执行的函数)和style(可选,用于指定按钮样式,如'cancel')等属性。
- option:第四个参数是一个可选的配置对象,这里设置了cancelable为false,表示用户不能通过点击提示框外部来关闭它(在iOS上有效,Android上默认就不能通过点击外部关闭)。
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 (
<Button
title="显示消息提示"
onPress={this.showAlert}
/>
);
}
}
export default AlertExample;