在看这篇文章是居于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
如下图:
![](http://bbs.520it.com/editormd/uploads/201609/20160921060333_217316.png)
3.重启package服务器:
打开新的cmd进入到项目reactNativeTest的根路劲执行
react-native start
4.安装成功后在根目录的node_modules文件夹下会多出两个modules
1.react-native-root-siblings
2.react-native-root-toast
如图:
![](http://bbs.520it.com/editormd/uploads/201609/20160921060343_336640.png)
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
});
};
- 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('登录成功');
3.案例演示
是在React-Native初体验四的基础上演示,添加登录的业务逻辑
1.执行效果:
![](http://bbs.520it.com/editormd/uploads/201609/20160921060356_858751.gif)
2.当前项目的结构:
![](http://bbs.520it.com/editormd/uploads/201609/20160921060408_164832.png)
3.首页AppMain.js跳转到登录界面Login.js:
<View style={styles.page}>
<TouchableOpacity onPress={()=>{this.onClickPage(1)}}>
<Text>Page 1:点击跳转到登录界面</Text>
</TouchableOpacity>
</View>
/**
* 点击了page
* @param page
*/
onClickPage(page){
if(page==1){
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业务逻辑:
<TouchableOpacity onPress={() => {this.btn_login()}}
>
<View style={styles.btn_login}>
<Text style={{color:'white',fontSize:18}}>登录</Text>
</View>
</TouchableOpacity>
/**
* 点击登录
*/
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.完整的代码请到reactNativeTest项目下载