本站文章均为
李华明Himi 原创,转载务必在明显处注明:
转载自【黑米GameDev街区】 原文链接:
http://www.himigame.com/react-native/2248.html
width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2248.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">
今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator
一:Navigator
对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面。这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,很方便的组件。废话不多说:先上示例代码:
首先我们导入 Navigator 组件:
|
import
React
,
{
.
.
.
Navigator
,
.
.
.
}
from
'react-native'
;
|
使用方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render
(
)
{
return
(
<
Navigator
initialRoute
=
{
{
name
:
'FirstPage'
,
component
:
FirstPage
}
}
configureScene
=
{
(
route
)
=
>
{
return
Navigator
.
SceneConfigs
.
HorizontalSwipeJump
;
}
}
renderScene
=
{
(
route
,
navigator
)
=
>
{
let
Component
=
route
.
component
;
return
<
Component
{
.
.
.
route
.
params
}
navigator
=
{
navigator
}
/
>
}
}
/
>
)
}
|
上面的代码,初始化了导航组件,且设置默认显示页面为 FirstPage,这里需要注意两点:
1. 我们主要关注 Navigator 里 initialRoute 中的 两个参数:
name: 组件名
component: 组件Class名
Himi导入FirstPage时如下:
|
import
FirstPage
from
'./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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|