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

来源：互联网发布：专业视频录制软件编辑：程序博客网时间：2024/05/21 08:44

在看这篇文章是居于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-siblings2.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      <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项目下载

0 0