【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场
发布时间：2020-12-15 05:19:40 所属栏目：百科 来源：网络整理
导读：本站文章均为 李华明Himi原创,转载务必在明显处注明： 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2285.html 在第五篇中介绍了使用导航Navigator进行(页面)场景的切换，但是对于一些需求其实是无法满足，或者说太浪费。例如
本站文章均为
李华明Himi原创,转载务必在明显处注明：
转载自【黑米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：
|
|
this
.
state
=
{
pageIndex
:
0
}
;
|
代码段2：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
switch
(
state
pageIndex
)
{
case
0
:
return
(
.
.
)
;
1
:
(
.
;
2
:
(
.
;
}
|
其实此种方式非常容易理解，是利用对变量的操作，进而控制绘制的不同。
当通过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是个崭新空白的（页面）场景。
示例：
<
Modal
animated
=
{
animationType
}
transparent
transparent
}
visible
modalVisible
}
onRequestClose
{
(
=
>
.
_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
;
{
animationType
:
true
modalVisible
0
;
}
visible
{
setState
{
;
}
replaceScene
{
1
;
}
addModal
{
2
;
}
render
{
{
:
(
View
style
styles
container
>
<
Text
himiTextStyle
}
>
Himi
React
Native
教程
/
Text
>
himiViewStyle
>
TouchableHighlight
underlayColor
=
'#f00'
onPress
replaceScene
bind
}
>
fontSize
20
>点击切换页面
>
TouchableHighlight
>
TouchableHighlight
'#f00'
addModal
}
>
>点击添加
>
>
View
>
>
;
:
<
SecondPage
/
>
;
:
(
>
Modal
}
}
}
}
>
modalViewStyle
>
TouchableHighlight
'#4169e1'
_setModalVisible
}
>
text
我是
>
>
<
/View>
</M
odal
>
>
>
TouchableHighlight
'#f00'
}
>
>
>
>
>
;
}
}
;
var
styles
create
{
container
{
flex
flexDirection
'column'
justifyContent
'center'
alignItems
backgroundColor
'#F5FCFF'
text
{
color
:
'#fff'
30
himiViewStyle
:
{
modalViewStyle
{
'#F00'
himiTextStyle
{
'#f00'
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
|
{
;
Main
from
"./Main"
;
export
SecondPage
.
Component
{
{
;
{
0
;
}
{
;
}
{
{
:
(
>
>
TouchableHighlight
'#4169e1'
}
>
SecondPage
>
>
>
>
)
:
Main
;
}
}
;
{
{
{
'#FF0'
{
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
