在看这篇文章是居于reactNativeTest项目的，要是没有看过之前的文章请先看React-Native初体验四
下面介绍的第三方库是：react-native-root-toast
react-native-root-toast项目简介
Features:
Pure javascript solution.
Support both Android and iOS.
Lots of custom options for Toast.
You can show/hide Toast by calling api or using Component inside render.
1.安装第三方库
1.打开cmd进入到项目reactNativeTest的根路劲执行：
npm install react-native-root-toast
2.然后执行：
npm install
如下图：
3.重启package服务器：
打开新的cmd进入到项目reactNativeTest的根路劲执行
react-native start
4.安装成功后在根目录的node_modules文件夹下会多出两个modules
1.react-native-root-siblings
2.react-native-root-toast
如图：
2.使用第三方库
1.新建一个ToastUtil.js工具类：
2，引用react-native-root-toast库
import Toast from 'react-native-root-toast';
3.编写show方法：
/**
* 冒一个时间比较短的Toast
* @param content
*/
export const toastShort = (content) => {
if (toast !== undefined) {
Toast.hide(toast);
}
toast = Toast.show(content.toString(), {
duration: Toast.durations.SHORT,
position: Toast.positions.CENTER,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0
});
};
4.调用toastShort方法：
/**在组件中中导入Toast工具类*/
import { toastShort } from '../utils/ToastUtil';
//直接调用
toastShort('登录成功');
3.案例演示
是在React-Native初体验四的基础上演示，添加登录的业务逻辑
1.执行效果：
2.当前项目的结构：
[图片上传中。。。（2）]
3.首页AppMain.js跳转到登录界面Login.js：
//1.添加点击事件onClickPage
<View style={styles.page}>
<TouchableOpacity onPress={()=>{this.onClickPage(1)}}>
<Text>Page 1:点击跳转到登录界面</Text>
</TouchableOpacity>
</View>
//2.处理点击事件onClickPage
/**
* 点击了page
* @param page
*/
onClickPage(page){
if(page==1){
//3.跳转到登录界面
InteractionManager.runAfterInteractions(() => {
_navigator.resetTo({
component: Login,
name: 'Login'
});
});
}else if(page==2){
}else if(page==3){
}
}
4.登录界面Login.js业务逻辑：
//添加点击事件btn_login
<TouchableOpacity onPress={() => {this.btn_login()}}
>
<View style={styles.btn_login}>
<Text style={{color:'white',fontSize:18}}>登录</Text>
</View>
</TouchableOpacity>
//2.处理点击事件btn_login
/**
* 点击登录
*/
btn_login(){
//用户登录
if(username === ''){
toastShort('用户名不能为空...');
return;
}
if(password === ''){
toastShort('密码不能为空...');
return;
}
if(username=='liujun' && password=='123'){
toastShort('登录成功');
username='';
password='';
//跳转到首页
InteractionManager.runAfterInteractions(() => {
navigator.resetTo({
component: AppMain,
name: 'AppMain'
});
});
}else{
toastShort('用户名或密码错误');
return;
}
}
5.新建一个ToastUtils.js
import Toast from 'react-native-root-toast';
let toast;
/**
* 冒一个时间比较短的Toast
* @param content
*/
export const toastShort = (content) => {
if (toast !== undefined) {
Toast.hide(toast);
}
toast = Toast.show(content.toString(), {
duration: Toast.durations.SHORT,
position: Toast.positions.CENTER,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0
});
};
/**
* 冒一个时间比较久的Toast
* @param content
*/
export const toastLong = (content) => {
if (toast !== undefined) {
Toast.hide(toast);
}
toast = Toast.show(content.toString(), {
duration: Toast.durations.LONG,
position: Toast.positions.CENTER,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0
});
};
6.在Login.js中使用第三方的库（react-native-root-toast）：
'use strict';
import React, { Component } from 'react';
import{
View,
Text,
BackAndroid,
TouchableOpacity,
Image,
TextInput,
InteractionManager,
StyleSheet,
} from 'react-native';
/**导入使用第三方的库,ToastUtil工具类*/
import { toastShort } from '../utils/ToastUtil';
...
class Login extends Component {
constructor(props) {
super(props);
....
}
.....
/**
* 点击登录
*/
btn_login(){
//用户登录
if(username === ''){
//使用第三方的库
toastShort('用户名不能为空...');
return;
}
if(password === ''){
//使用第三方的库
toastShort('密码不能为空...');
return;
}
if(username=='liujun' && password=='123'){
toastShort('登录成功');
////跳转到首页
.....
}else{
toastShort('用户名或密码错误');
return;
}
}
.....
.....
7.完整的代码请到reactNativeTest项目下载
来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2311&extra=page%3D1
