在看這篇文章是居于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的根路勁執(zhí)行：

npm install react-native-root-toast

2.然后執(zhí)行：

npm install

如下圖：

3.重啟package服務(wù)器：
打開新的cmd進入到項目reactNativeTest的根路勁執(zhí)行

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.調(diào)用toastShort方法：

/**在組件中中導(dǎo)入Toast工具類*/
import { toastShort } from '../utils/ToastUtil';
 
 
//直接調(diào)用
toastShort('登錄成功');

3.案例演示
是在React-Native初體驗四的基礎(chǔ)上演示，添加登錄的業(yè)務(wù)邏輯
1.執(zhí)行效果：

  //1.添加點擊事件onClickPage
  <View style={styles.page}>
         <TouchableOpacity onPress={()=>{this.onClickPage(1)}}>
                    <Text>Page 1:點擊跳轉(zhuǎn)到登錄界面</Text>
         </TouchableOpacity>
  </View>
   //2.處理點擊事件onClickPage
     /**
     * 點擊了page
     * @param page
     */
    onClickPage(page){
        if(page==1){
            //3.跳轉(zhuǎn)到登錄界面
            InteractionManager.runAfterInteractions(() => {
                _navigator.resetTo({
                    component: Login,
                    name: 'Login'
                });
            });
        }else if(page==2){
        }else if(page==3){
        }
    }

4.登錄界面Login.js業(yè)務(wù)邏輯：

//添加點擊事件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='';
        //跳轉(zhuǎn)到首頁
        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';
/**導(dǎo)入使用第三方的庫,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('登錄成功');
            ////跳轉(zhuǎn)到首頁
            .....
        }else{
            toastShort('用戶名或密碼錯誤');
            return;
        }
    }
    .....
    .....

7.完整的代碼請到reactNativeTest項目下載

來源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2311&extra=page%3D1