本站文章均为
李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2285.html
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2285.html
在第五篇中介绍了使用导航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>
</M
odal
>
<
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
,
}
,
}
)
;
|
演示效果图：（点击查看动态效果）
