react-native-root-toast
来源:互联网 发布:路由器端口号怎么查询 编辑:程序博客网 时间:2024/06/07 04:43
在看这篇文章是居于reactNativeTest项目的,要是没有看过之前的文章请先看React-Native初体验四
http://blog.csdn.net/u012987546/article/details/52583528
下面介绍的第三方库是: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方法:
- 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方法:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
3.案例演示
是在React-Native初体验四的基础上演示,添加登录的业务逻辑
1.执行效果:
2.当前项目的结构:
3.首页AppMain.js跳转到登录界面Login.js:
- 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业务逻辑:
- 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
- 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):
- 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.完整的代码请到reactNativeTest项目下载
- react-native-root-toast
- react-native-root-toast
- react-native-sww-toast
- react native Toast封装
- react-native 添加 Toast 模块
- react native学习之Toast
- React Native调用原生模块--Toast
- React Native 自定义实现【Toast】提示框
- React Native 学习笔记十三(原生模块之Toast)
- React Native 自定义控件之验证码和Toast
- react-native-easy-toast, 一款简单易用的 Toast 组件,支持 Android&iOS.
- react-native-easy-toast, 一款简单易用的 Toast 组件,支持 Android&iOS.
- React-Native初体验五(window下引用第三方库:Toast)
- React-Native初体验五(window下引用第三方库:Toast)
- react native
- React Native
- React Native
- React- Native
- Python核心编程---读书笔记:第9章 文件和输入输出
- Android中MainActivity.this和this的区别
- HTML巩固练习之表格的使用
- 前端js性能优化(三)
- 匈牙利算法模板
- react-native-root-toast
- JAVABean 与EL表达式
- java.io.EOFException
- redis string 命令
- Hough变换原理图
- Python核心编程---读书笔记:第10章 错误和异常
- Python核心编程---读书笔记:第11章 函数和函数式编程
- Spring整合Hibernate(2)----注解方式
- MyEclipse实用的快捷键