今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：Navigator
一：Navigator
对于页面导航其实主要功能就是：每个页面都知道本身应该切换到哪个页面，并且切到的页面会记录从哪里来，如果要返回的话，知道返回到哪个页面。这一切都不需要再用逻辑管理！而且每个页面之间也可以进行参数传递，很方便的组件。废话不多说：先上示例代码：
首先我们导入 Navigator 组件：
|
1
2
3
4
5
|
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时如下：
|
1
|
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
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
|
import React, {
AppRegistry,
Component,
View,
Text,
StyleSheet,
TouchableHighlight,
} from
'react-native'
;
import SecondPage from
'./SecondPage'
;
class FirstPage extends React.Component {
constructor(props) {
super
(props);
this
.state = { };
}
nextEvent(){
const { navigator } =
this
.props;
if
(navigator) {
navigator.push({
name:
'SecondPage'
,
component: SecondPage,
params: {
titleText:
''
}
})
}
}
render() {
return
(
<View style={styles.himiViewStyle} >
<Text style={styles.himiTextStyle}>Himi React Native 教程 </Text>
<View style={styles.himiViewStyle}>
<TouchableHighlight
underlayColor=
'#4169e1'
onPress={
this
.nextEvent.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,
},
});
module.exports = FirstPage;
|
这里我们主要看 nextEvent 函数内容，
const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。
得到Navigator组件，可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。
下面代码段演示了如何切换到下一个页面：
|
1
2
3
4
5
6
7
8
9
|
if
(navigator) {
//判断是否正常接收到传来的导航组件
navigator.push({
//利用此函数进行切换到指定页面
name:
'SecondPage'
,
//目标组件名
component: SecondPage,
//目标组件Class名
params: {
titleText:
''
}
})
}
|
还需要强调的是params，此参数是页面切换时传入下个页面的参数书写形式。
获取时，直接 this.props.titleText 即可得到，简单、方便。
下面代码段演示如何返回上个页面：
|
1
2
3
4
|
const { navigator } =
this
.props;
if
(navigator) {
navigator.pop();
}
|
返回上一页面就十分简单了，不多赘述了。
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
|
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,
},
});
|
运行效果图：（点击查看动态效果）
从上图效果可以看出，切换之间的页面可以直接通过手势滑动进行切换～:)
