React Native API 模块之 ToastAndroid 详解

(一)前言

截止到昨天我们已经顺利完成React Native组件Android部分的讲解及学习，今天开始我们来看一下API模块。首先来看一个比较简单的模块:ToastAndroid。android平台的toast消息。

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该ToastAndroid模块是把Android平台原生模块Toast封装成一个JS模块使用，来进行弹出一个toast消息。该模块有一个'show'方法会传入下面两个参数:①:message  string 字符串格式，设置要进行toast显示的文本    ②:duration  int格式 toast消息弹出显示的时长。有两个可选值ToastAndroid.SHORT或者ToastAndroid.LONG

(二)方法

1.show(message:string,duration:number)  static 静态方法，该设置toast消息的弹出

(三)属性

1.SHORT  静态int值，表示toast显示较短的时间

2.LONG   静态int值，表示otast显示较长的时间

(四)使用实例

上下讲解了ToastAndroid模块的属性和介绍，下面来演示一下实例效果。具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ToastAndroid,
  TouchableHighlight,
} from 'react-native';
class CustomButton extends React.Component {
  render() {
    return (
      
        {this.props.text}
      
    );
  }
}
class ToastAndroidDemo extends Component {
  render() {
    return (
      
        
          点击弹出短时间的toast
        
        ToastAndroid.show('点击我好疼,短时间的~',ToastAndroid.SHORT)}/>
        
          点击弹出长时间的toast
        
        ToastAndroid.show('点击我好疼,长时间的~',ToastAndroid.LONG)}/>
      
    );
  }
}
const styles = StyleSheet.create({
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }
});

AppRegistry.registerComponent('ToastAndroidDemo', () => ToastAndroidDemo);

运行截图如下:

查看图片

(五)最后总结

今天我们主要讲解学习了ToastAndroid模块。大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（www.lcode.org/） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

查看图片

关注我的微博，可以获得更多精彩内容