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

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