转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2248.html
今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator
一:Navigator
对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面。这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,很方便的组件。废话不多说:先上示例代码:
首先我们导入 Navigator 组件:
使用方式:
上面的代码,初始化了导航组件,且设置默认显示页面为 FirstPage,这里需要注意两点:
1. 我们主要关注 Navigator 里 initialRoute 中的 两个参数:
name: 组件名
component: 组件Class名
Himi导入FirstPage时如下:
所以 name 和 component 都填写的为FirstPage
2. <Component {…route.params} navigator={navigator} />
上面这一行是将navigator作为props进行传递
3. Navigator.SceneConfigs.HorizontalSwipeJump
上面一行是设置页面切换之间的动画效果,更多效果查看源文件:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
下面我们看下FirstPage.js :
这里我们主要看 nextEvent 函数内容,
const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。
得到Navigator组件,可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。
下面代码段演示了如何切换到下一个页面:
还需要强调的是params,此参数是页面切换时传入下个页面的参数书写形式。
获取时,直接 this.props.titleText 即可得到,简单、方便。
下面代码段演示如何返回上个页面:
返回上一页面就十分简单了,不多赘述了。
Himi这里为了演示效果,所以下面把 ThreePage.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
|
import
React
,
{
AppRegistry
,
Component
,
View
,
Text
,
Alert
,
StyleSheet
,
TouchableHighlight
,
}
from
'react-native'
;
export
default
class
threePage
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
;
this
.
state
=
{
}
;
}
backEvent
(
)
{
const
{
navigator
}
=
this
.
props
;
if
(
navigator
)
{
navigator
.
pop
(
)
;
}
}
render
(
)
{
return
(
<
View
style
=
{
styles
.
himiViewStyle
}
>
<
Text
style
=
{
styles
.
himiTextStyle
}
>
ThreePage
<
/
Text
>
<
View
style
=
{
styles
.
himiViewStyle
}
>
<
TouchableHighlight
underlayColor
=
'#4169e1'
onPress
=
{
this
.
backEvent
.
bind
(
this
)
}
>
<
Text
style
=
{
styles
.
text
}
>
返回
[
SecondPage
]页面
<
/
Text
>
<
/
TouchableHighlight
>
<
/
View
>
<
/
View
>
)
}
}
;
var
styles
=
StyleSheet
.
create
(
{
text
:
{
color
:
'#f00'
,
fontSize
:
20
,
}
,
himiViewStyle
:
{
flex
:
1
,
flexDirection
:
'column'
,
justifyContent
:
'center'
,
alignItems
:
'center'
,
backgroundColor
:
'#F5FCFF'
,
}
,
himiTextStyle
:
{
color
:
'#f00'
,
fontSize
:
30
,
marginTop
:
70
,
}
,
}
)
;
|
运行效果图:(点击查看动态效果)
从上图效果可以看出,切换之间的页面可以直接通过手势滑动进行切换~:)