ToastAndroid React Native - Javascript

在React Native中，ToastAndroid是一个快速简便的方式来向用户显示一些简单的提示信息。它可以用于告知用户某些操作正在进行中，或者某些错误已发生等。在本文中，我们将讨论如何使用ToastAndroid进行功能的开发。

安装

要使用ToastAndroid，你需要先安装React Native，然后在项目中安装"react-native-toast-android"模块。在命令行中输入以下命令：

npm install --save react-native-toast-android

接下来，你需要在"MainApplication.java"文件中引入此模块。

package com.example;

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.toast.RCTToastPackage; // 引入


public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new RCTToastPackage() // 引入
          );
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

使用

在使用ToastAndroid之前，你需要先导入和实例化相应的模块。在终端中输入以下命令：

import ToastAndroid from 'react-native-toast-android';

使用ToastAndroid非常简单。你只需要调用show方法并传入需要显示的信息，就可以在应用中显示Toast消息了。

ToastAndroid.show('Hello, React Native!', ToastAndroid.SHORT);

你可以使用ToastAndroid的其他选项更改Toast消息的样式和显示时间。

ToastAndroid.showWithGravity(
  'Hello, React Native!!',
  ToastAndroid.LONG,
  ToastAndroid.CENTER
);

示例

以下是一个简单的例子，演示如何使用ToastAndroid。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import ToastAndroid from 'react-native-toast-android';

export default class App extends Component {

  showToast = () => {
    ToastAndroid.show('Hello, React Native!', ToastAndroid.SHORT);
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.showToast}>
          <Text style={styles.button}>Show Toast</Text>
        </TouchableOpacity>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    color: '#fff',
    backgroundColor: '#007AFF',
    padding: 10
  }
});

运行代码，如果你点击按钮，将会出现Toast消息。

结论

使用ToastAndroid的React Native程序是非常简单的。它是向用户提供简单提示的理想工具。现在，你已经学会了如何使用ToastAndroid，开始构建你的应用程序吧！