React Native页面切换
本文介绍React Native中除Navigator外的两种页面切换方法：通过状态控制渲染不同组件和使用Modal组件模拟新页面，附带代码示例。
在第五篇中介绍了使用导航Navigator进行(页面)场景的切换，但是对于一些需求其实是无法满足，或者说太浪费。例如：
1. 只是想做一个很简单的页面切换，并不需要记录从哪来～也不需要手势滑屏返回等，这时使用导航Navigator太浪费了。
2. 假设:
a) 有个View 包括一个Navigator组件和一个Image组件
b) Navigator 对页面A ，B，C之间进行导航
此时我们有个需求在B页面切换到一个崭新空白的页面场景中（不带Image），此时我们想要通过Navigator实现需求则变得非常麻烦。（为此，Himi考虑尝试了很多方式）
本篇主要介绍除了使用Navigator 之外的两种切换页面的方法：
一：采用逻辑控制绘制
代码段1：
|
1
2
3
|
this
.state = {
pageIndex:0
};
|
代码段2：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
switch
(
this
.state.pageIndex) {
case
0:
return
(
......
);
case
1:
return
(
......
);
case
2:
return
(
......
);
}
|
其实此种方式非常容易理解，是利用对变量的操作，进而控制绘制的不同。
当通过this.setState()函数对pageIndex进行修改，从而this进行重绘时，会根据pageIndex的值不同，绘制出各不相同的内容。
（运行效果放在最后一并展示）
二：采用Modal组件
Modal组件，首先给出官方解释：
Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
在从根视图开始就使用RN编写的应用中，你应该使用Navigator来代替Modal。通过一个最顶层的Navigator，你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。
简单来说，利用Modal只是模拟感觉切（页面）场景的，Modal只是覆盖到当前视图上而已，且可以任意布局和添加组件，Modal是个崭新空白的（页面）场景。
示例：
|
1
2
3
4
5
6
7
|
<Modal
animated={
this
.state.animationType}
transparent={
this
.state.transparent}
visible={
this
.state.modalVisible}
onRequestClose={() => {
this
._setModalVisible(
false
)}}
>
</Modal>
|
animated: （bool类型）是否带有动画效果
注意：animated是旧版本才有的属性
新版本属性为：animationType enum(‘none’, ‘slide’, ‘fade’)
transparent: (bool类型)是否透明
visible: (bool类型)是否可见
onRequestClose:( 回调函数 ) 是指Android的返回实体按钮，ios可以不用处理
需要强调的是，Modal 在设置为可见情况下，默认覆盖当前视图之上。
为了更好的演示效果与代码参考，Himi专门写了一个示例，如下两个文件：
Main.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, {
AppRegistry,
Component,
View,
Text,
StyleSheet,
TouchableHighlight,
Modal,
} from
'react-native'
;
import SecondPage from
"./SecondPage"
;
export
default
class Main extends Component {
constructor(props) {
super
(props);
this
.state = {
animationType:
true
,
modalVisible:
true
,
transparent:
true
,
pageIndex:0
};
}
_setModalVisible(visible) {
this
.setState({modalVisible: visible});
}
replaceScene(){
this
.setState({pageIndex:1});
}
addModal(){
this
.setState({pageIndex:2});
}
render() {
switch
(
this
.state.pageIndex) {
case
0:
return
(
<View style={styles.container} >
<Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
<View style={styles.himiViewStyle}>
<TouchableHighlight
underlayColor=
'#f00'
onPress={
this
.replaceScene.bind(
this
)}
>
<Text style={{fontSize:20}}>点击切换页面</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor=
'#f00'
onPress={
this
.addModal.bind(
this
)}
>
<Text style={{fontSize:20}}>点击添加Modal</Text>
</TouchableHighlight>
</View>
</View>
);
case
1:
return
<SecondPage/>;
case
2:
return
(
<View style={styles.container} >
<Modal
animated={
this
.state.animationType}
transparent={
this
.state.transparent}
visible={
this
.state.modalVisible}
onRequestClose={() => {
this
._setModalVisible(
false
)}}
>
<View style={styles.modalViewStyle}>
<TouchableHighlight
underlayColor=
'#4169e1'
onPress={
this
._setModalVisible.bind(
this
,
false
)}
>
<Text style={styles.text} > 我是Modal,点击将隐藏 </Text>
</TouchableHighlight>
</View>
</Modal>
<Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
<View style={styles.himiViewStyle}>
<TouchableHighlight
underlayColor=
'#f00'
onPress={
this
.replaceScene.bind(
this
)}
>
<Text style={{fontSize:20}}>点击切换页面</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
};
var
styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:
'column'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
},
text: {
color:
'#fff'
,
fontSize:30,
},
himiViewStyle:{
flex: 1,
flexDirection:
'column'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F5FCFF'
,
},
modalViewStyle:{
flex: 1,
flexDirection:
'column'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#F00'
,
},
himiTextStyle:{
color:
'#f00'
,
fontSize:30,
marginTop:70,
},
});
|
SecondPage.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import React, {
AppRegistry,
Component,
View,
Text,
StyleSheet,
TouchableHighlight,
} from
'react-native'
;
import Main from
"./Main"
;
export
default
class SecondPage extends React.Component {
constructor(props) {
super
(props);
this
.state = {
pageIndex:0
};
}
replaceScene(){
this
.setState({pageIndex:1});
}
render() {
switch
(
this
.state.pageIndex) {
case
0:
return
(
<View style={styles.himiViewStyle} >
<View style={styles.himiViewStyle}>
<TouchableHighlight
underlayColor=
'#4169e1'
onPress={
this
.replaceScene.bind(
this
)}
>
<Text style={styles.text} > 我是SecondPage,点我切换 </Text>
</TouchableHighlight>
</View>
</View>
)
case
1:
return
<Main/>;
}
}
};
var
styles = StyleSheet.create({
text: {
color:
'#f00'
,
fontSize:20,
},
himiViewStyle:{
flex: 1,
flexDirection:
'column'
,
justifyContent:
'center'
,
alignItems:
'center'
,
backgroundColor:
'#FF0'
,
},
himiTextStyle:{
color:
'#f00'
,
fontSize:30,
marginTop:70,
},
});
|
演示效果图：（点击查看动态效果）
扫一扫
3955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
