react-native-root-toast
React native root Toast
2023-09-27 14:29:02 时间
在看这篇文章是居于reactNativeTest项目的,要是没有看过之前的文章请先看React-Native初体验四
http://blog.csdn.net/u012987546/article/details/52583528
下面介绍的第三方库是:react-native-root-toast
react-native-root-toast项目简介
Features:
-
Pure JavaScript solution.
-
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方法:
- 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(源码分析)
- 【react全家桶】react-router
- React Native集成支付宝支付
- react native 调用原生UI组件
- 从零学React Native之04自定义对话框
- react-native页面间传递数据的几种方式
- react:使用Context传递参数给孙子组件
- 21 个 React 性能优化技巧
- react 中的异步渲染
- React & Redux in TypeScript - 静态类型指南
- react native全球化react native i18n按键转换语言实战
- React Native 仿抖音点赞特效
- 谈谈React-Native中的手势
- React Native 与iOS交互
- 基于React-Native及Redux的Immutable.js引入
- 集成 jpush-react-native 常见问题汇总 (iOS 篇)
- React Native Android打包apk
- React Native导航器之react-navigation使用
- React Native打包代码解析与拆分Bundle做法
- React-Native-Navigator导航条-反向传值
- React Native图表插件react-native-charts-wrapper集成教程
- React Native ListView中图片加载优化处理(三)
- React Native常用一些组件
- React Native组件之ScrollView 和 StatusBar和TabBarIos
- 《React-Native系列》36、 ReactNative地图组件
- React-Native知乎日报
- [React-Native]Props和State