React Native 之 ToastAndroid(提示语)(二十一)

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;
相关推荐
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong15 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373217 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪20 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码21 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农21 小时前
【React用到的一些算法】游标和栈
算法·react.js
小高00721 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
XTransfer技术21 小时前
RN也有微前端框架了? Xtransfer的RN优化实践(一)多bundle架构
前端·react native
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 天前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js