react-native-root-toast-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

react-native-root-toast

阅读量：4086 次

发布时间：2019-05-25

本文共 6480 字，大约阅读时间需要 21 分钟。

在看这篇文章是居于的，要是没有看过之前的文章请先看

http://blog.csdn.net/u012987546/article/details/52583528

下面介绍的第三方库是：

react-native-root-toast项目简介

Features:

Pure solution.

Support both and .

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，引用-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      });    }; 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17

4.调用toastShort方法：

/**在组件中中导入Toast工具类*/    import { toastShort } from '../utils/ToastUtil';    //直接调用    toastShort('登录成功'); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  
 
  1 
  2 
  3 
  4 
  5 
  6

3.案例演示

是在的基础上演示，添加登录的业务逻辑

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){            }        } 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28

4.登录界面Login.js业务逻辑：

//添加点击事件btn_login    
   
     {
  this.btn_login()}}                >         
                 
     
      登录
               
         
       //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;        }    } 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38

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        });      }; 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38

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;            }        }        .....        ..... 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53

7.完整的代码请到下载

你可能感兴趣的文章

STM32CubeMX 真的不要太好用

STM32CubeMX介绍、下载与安装

不要买铝合金机架的无人机，不耐摔，易变形弯曲。

ACfly也是基于FreeRTOS的

F330装GPS的位置

pixhawk也可以用Airsim仿真

《无人机电机与电调技术》可以看看

我发现七月在线的GAAS课程基本都讲到了

carzepony也在想往FreeRTOS上迁移

可以买个好点的电烙铁

ACfly调参记录（包括ACfly-F330和ACfly-T265）

一定记得每飞几次或者隔一天要把螺丝和浆帽拧一次，确实会松的

《多旋翼无人飞行器嵌入式飞控开发指南》里基于FreeRTOS的无人机软件框架

思岚A1的SDK其实很好读懂，每个函数清晰明了，可以直接调用

pixhawk（PX4）的一些论坛网站（包括中文版的PX4用户手册和PX4开发手册）

串级 PID 为什么外环输出是内环的期望？（和我之前对串级PID的总结一样）

我刚刚才完全清楚GPS模块的那根杆子是怎么固定安装好的

去github里面找找也没有别人无人机+SLAM的工程

PX4与ROS关系以及仿真控制（键盘控制无人机）

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-09-20 12:04:49 当前IP: 18.116.8.169 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我