react-native-root-toast專案簡介

Features:

1. Pure javascript solution.

2. Support both Android and iOS.

3. Lots of custom options for Toast.

4. 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.案例演示

1.執行效果：

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;
            }
        }
        .....
        .....