今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：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,
},
}); |
运行效果图：（点击查看动态效果）
从上图效果可以看出，切换之间的页面可以直接通过手势滑动进行切换～:)