在看這篇文章是居于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
