React Native]React Native组件之Navigator

1.简介

导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能，Navigator提供了路由对象功能进行区分每个页面。 
我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。 
除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。 
对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs

2.动画手势属性

PushFromRight 
FloatFromRight 
FloatFromLeft 
FloatFromBottom 
FloatFromBottomAndroid 
FadeAndroid 
HorizontalSwipeJump 
HorizontalSwipeJumpFromRight 
VertivalUpSwipeJump 
VertivalDownSwipeJump 
更多属性，可以去修改NavigatorSceneConfigs.js这个文件。

3.Navigator方法

在使用导航器的时候，如果你已经获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:getCurrentRoutes() 该进行返回存在的路由列表信息 
getCurrentRoutes() 返回存在的路由列表信息 
jumpBack() 回退操作，但是不会卸载（删除）当前页面 
jumpForward() 跳转到相对于当前页面的下一个页面 
jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除） 
push(route) 导航切换到一个新的页面，新的页面进行压入栈。通过jumpForward()方法可以回退过去 
pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面 
replace(route) 只用传入的路由的指定页面进行替换掉当前的页面 
replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面 
replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面 
resetTo(route) 进行导航到新的界面，并且重置整个路由栈 
immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈 
popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除 
popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

4.Navigator属性风格

configureScene －－ function 方法， 该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight 
initialRoute －－ object 参数对象， 进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项 
initialRouteStack －－ [object] 参数对象数组 该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组 
navigationBar －－ node 该为可选的参数，在页面切换中用来提供一个导航栏 
navigator －－ object 该为可选参数，可以从父类导航器中获取导航器对象 
onDidFoucs －－ function 该方法已经废弃，我们可以使用navigationContext.addListener(‘didfocus’,callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由 
onWillFocus －－function 该方法已经废弃，我们可以使用navigationContext.addListener(‘willfocus’,callback)方法进行替代。该会页面每次进行切换之前调用 
renderScene －－ function 该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:

(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />
1
1

sceneStyle －－ 样式风格，该继承了View视图的所有样式风格。该设置用于每个页面容器的风格

5.实例

'use strict';import React, { Component }  from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Navigator,    TouchableHighlight,} from 'react-native';class NavButton extends Component {    render() {        return (            <TouchableHighlight                style={styles.button}                underlayColor="#B5B5B5"                onPress={this.props.onPress}>                <Text style={styles.buttonText}>{this.props.text}</Text>            </TouchableHighlight>        );    }}class HomeScene extends Component {    render() {        return(            <View style={styles.container}>                <NavButton                     onPress={() => {                        this.props.navigator.push({                            component: ConfigsScene,                            name: '手势属性',                        });                    }}                    text='手势属性'                />                <NavButton                     onPress={() => {                        this.props.navigator.push({                            component: MethodsScene,                            name: '方法',                        });                    }}                    text='方法'                />            </View>        );    }}class ConfigsScene extends Component {    render() {        return (            <View style={styles.container}>                <Text style={styles.messageText}>{this.props.message}</Text>                <NavButton                    onPress={() => {                        this.props.navigator.pop();                    }}                    text="返回上一页"                />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.PushFromRight,                        });                    }}                    text="PushFromRight default"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromRight,                        });                    }}                    text="FloatFromRight"                    />                    <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromLeft,                        });                    }}                    text="FloatFromLeft"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromBottom,                        });                    }}                    text="FloatFromBottom"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromBottomAndroid,                        });                    }}                    text="FloatFromBottomAndroid"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FadeAndroid,                        });                    }}                    text="FadeAndroid"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump,                        });                    }}                    text="HorizontalSwipeJump"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,                        });                    }}                    text="HorizontalSwipeJumpFromRight"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.VerticalUpSwipeJump,                        });                    }}                    text="VerticalUpSwipeJump"                    />                <NavButton                    onPress={() => {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.VerticalDownSwipeJump,                        });                    }}                    text="VerticalDownSwipeJump"                    />            </View>        );    }}class MethodsScene extends Component {    render() {        return (            <View style={styles.container}>                <Text style={styles.messageText}>Current Routes length: {this.props.navigator.getCurrentRoutes().length}</Text>                <NavButton                     onPress={() => {                        this.props.navigator.jumpBack();                    }}                    text='jumpBack'                />                <NavButton                     onPress={() => {                    }}                    text='jumpForward'                />                <NavButton                     onPress={() => {                    }}                    text='jumpTo'                />            </View>        );    }}class EndScene extends Component {    render() {        return (            <View style={styles.container}>                <NavButton                    onPress={() => {                        this.props.navigator.pop();                    }}                    text="返回上一页"                />                <NavButton                    onPress={() => {                        this.props.navigator.popToTop();                    }}                    text="退到栈中第一个页面"                />            </View>        );    }}export default class NavigatorMazouri extends Component {    render() {        return (            <Navigator                 style={styles.container}                initialRoute={{                    component: HomeScene,                    name: 'home'                }}                renderScene={(route, navigator) => {                    let Component = route.component;                    if(route.component) {                    return <Component {...route.params} navigator={navigator} />                    }                }}                configureScene={(route) => {                    if (route.sceneConfig) {                        return route.sceneConfig;                    }                    return Navigator.SceneConfigs.PushFromRight;                }}            />        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        backgroundColor: '#F5FCFF',    },    messageText: {        fontSize: 17,        fontWeight: '500',        padding: 15,        marginTop: 50,        marginLeft: 15,    },    button: {        backgroundColor: 'white',        padding: 15,        borderBottomWidth: StyleSheet.hairlineWidth,        borderBottomColor: '#CDCDCD',    },});
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253