ReactNative官网例子练习（四）——页面跳转

开发一个应用，基本会有很多个页面，就像我们开发Android原生应用的时候，多个Activity 多个Fragment之间跳转 ，Rn中是怎么跳转的呢？答案就是通过导航器Navigator。 

例子代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native';

class RnWidget extends Component {

render() {
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;

return (
<Navigator
styles = {styles.container}
initialRoute = {{name: defaultName,component : defaultComponent}}
configureScene = {
(route)=>{
return Navigator.SceneConfigs.FloatFromRight
}
}
renderScene = {(route,navigator)=>{
let Component = route.component;
return <Component{...route.params} navigator={navigator}/>
}}
/>
)
}
}
//第一个界面
class FirstPageComponent extends Component{
clickJump(){
//因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
const{navigator} = this.props;
if(navigator){
navigator.push({
name : "SecondPageComponent",
component : SecondPageComponent
})
}
}
render(){
return(
<View style={styles.container}>
<Text>我是第一个界面</Text>
<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击进入第二个界面</Text>
</TouchableHighlight>
</View>
)
}
}

//第二个界面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
//把当前页面pop掉 回到上一个页面
navigator.pop();
}
}

render(){
return(
<View style={styles.container}>
<Text>我是第二个界面</Text>
<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击返回第一个界面</Text>
</TouchableHighlight>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},

});
AppRegistry.registerComponent('RnWidget', () => RnWidget);

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
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

首先要有一个程序的主入口： 

class RnWidget extends Component 

然后我们要有两个界面 第一个界面和第二个界面 

class FirstPageComponent extends Component 

class SecondPageComponent extends Component

（1）在程序的主入口里面初始化我们的导航器Navigator

initialRoute={{ name: defaultName, component: defaultComponent }}

1
1

这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。（注意这里填什么参数纯粹是自定义的，因为这个参数也是你自己发自己收，自己在renderScene方法中处理。我们这里示例用了两个参数，但其实真正使用的参数只有component）

configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;

1
2
1
2

}} 这个是页面之间跳转时候的动画，具体有哪些？可查看下文档或者有源代码的: node_modules/React-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

1
2
3
4
5
1
2
3
4
5

这里是每个人最疑惑的，我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push pop jump…等方法，这是我们等下用来跳转页面用的那个navigator对象。 

（2） 在第一个界面和第二个界面里面分别有一个push的方法和pop的方法。 

navigator.push 传入name和你想要跳的组件页面 

navigator.pop(); 把当前页面pop掉

效果：