React-Native初体验五（window下引用第三方库：Toast）

在看这篇文章是居于reactNativeTest项目的，要是没有看过之前的文章请先看React-Native初体验四

下面介绍的第三方库是：react-native-root-toast

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

是在React-Native初体验四的基础上演示，添加登录的业务逻辑

1.执行效果：

2.当前项目的结构：

3.首页AppMain.js跳转到登录界面Login.js：

      //1.添加点击事件onClickPage
      
             {this.onClickPage(1)}}>
                        Page 1:点击跳转到登录界面
             

      

       //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
     {this.btn_login()}}
                >
         
             'white',fontSize:18}}>登录
          
     

    //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项目下载