React Native Android 独有组件之 Toast

本模块将原生的 ToastAndroid 模块导出为一个 JS 模块，用于在 Android 设备上显示一个悬浮的提示信息。

属性

• SHORT
  ToastAndroid.SHORT;

• LONG
  ToastAndroid.LONG;

• TOP
  ToastAndroid.TOP;

• BOTTOM
  ToastAndroid.BOTTOM;

• CENTER
  ToastAndroid.CENTER;

方法

• show()

static show(message, duration)

• showWithGravity()

static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

• showWithGravityAndOffset()

static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

实例

1. 示例代码

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  ToastAndroid,
  Button,
} from 'react-native';

export default class App extends Component { 
  
  render() { 
    return (
      <View style={styles.container}>
        <Button
          title='提示1'
          onPress={() => {
            ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
          }}
        />

        <Button
          title='提示2'
          onPress={() => {
            ToastAndroid.showWithGravity(
              "All Your Base Are Belong To Us",
              ToastAndroid.SHORT,
              ToastAndroid.CENTER
            );
          }}
        />

        <Button
          title='提示3'
          onPress={() => {
            ToastAndroid.showWithGravityAndOffset(
              "A wild toast appeared!",
              ToastAndroid.LONG,
              ToastAndroid.TOP,
              25,
              50
            );
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent:'space-between',
    flexDirection: 'column-reverse'
  },
  
})

2. 效果图

toast01.jpg toast02.jpg toast03.jpg