导航器（Navigator）
一、引入Navigator库
在0.43以前我们是可以直接从'react-native'包中引入，但是在0.43之后如果直接从'react-native'中引入Navigator的话会直接报一个错误：
Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react-native’
表示已经被从'react-native'中移除。并提示我们需要导入'react-native-deprecated-custom-components'这个包才能引用。
解决方案：
（1）用终端cd到当前项目的根目录下；
（2）输入命令：npm install react-native-deprecated-custom-components --save
（3）引入Navigator库：import { Navigator } from 'react-native-deprecated-custom-components'
二、配置导航器
-
step 1：设置路由对象（initialRoute）
这个指定了默认的页面，也就是启动APP之后会看到的界面的第一屏。对象的属性是自定义的，这个对象的内容会在renderScence方法中处理。且路由对象必须包含component，即需要渲染的页面组件。initialRoute={rootRoute} -
step 2： 场景渲染的配置（configureScene）
configureScene={(route)=> { return Navigator.SceneConfigs.PushFromRight; }} -
step 3： 渲染场景（renderScence）
参数：route(第一步创建并设置给导航器的路由对象)，navigator(导航器对象)
实现：给需要显示的组件设置属性renderScene={(route, navigator) => { // 从route对象中获取页面组件 var Component = route.component; return ( <Component navigator={navigator} route={route} /> ); }}
三、代码实现
- 创建FirstPage类
import React, { Component } from 'react';
import {
View,
Text,
AppRegistry,
StyleSheet,
TouchableOpacity
} from 'react-native';
/*引入SecondPage类*/
var SecondPage = require('./SecondPage');
var FirstPage = React.createClass({
/*按钮触发方法，跳转到SecondPage界面*/
pressPush: function() {
var nextRoute = {
component: SecondPage,
/*传值*/
passProps: {
message: '我是传到SecondPage的message'
}
};
this.props.navigator.push(nextRoute)
},
render() {
return(
<View style={styles.containerView}>
<TouchableOpacity
style={styles.clickItemStyle}
onPress={this.pressPush}
>
<Text> 点击跳转打下一个界面 </Text>
</TouchableOpacity>
</View>
)
}
});
var styles = StyleSheet.create({
containerView: {
flex: 1,
backgroundColor: "cyan",
justifyContent: 'center',
alignItems: 'center',
},
clickItemStyle: {
width: 200,
height: 30,
borderColor: 'red',
borderWidth: 1,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center'
}
});
// 输出类
module.exports = FirstPage;
- 创建SecondPage类
import React, { Component } from 'React';
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableOpacity
} from 'react-native';
var SecondPage = React.createClass({
pressPop: function() {
this.props.navigator.pop();
},
render() {
return(
<View style={styles.containerView}>
<Text> {this.props.message} </Text>
<TouchableOpacity
style={styles.itemstyle}
onPress={this.pressPop}
>
<Text> 点击跳回上一界面 </Text>
</TouchableOpacity>
</View>
)
}
});
var styles = StyleSheet.create({
containerView: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'yellow',
},
itemstyle: {
width: 200,
height: 30,
borderColor: 'red',
borderWidth: 1,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center'
}
});
module.exports = SecondPage;
- 设置导航器
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components'
var FirstPage = require('./FirstPage');
var LessonNavigator = React.createClass({
render() {
/* 创建路由对象 */
var rootRoute = {
component: FirstPage
};
return(
<Navigator
/*1.设置路由对象
initialRoute
这个指定了默认的页面，也就是启动APP之后会看到的界面的第一屏。
对象的属性是自定义的，这个对象中的内容会在renderScence方法中处理。
备注：必须包含的属性，即component，表示需要渲染的页面组件
*/
initialRoute={rootRoute}
/*
2.configureScene
场景渲染的配置
*/
configureScene={(route)=> {
return Navigator.SceneConfigs.PushFromRight;
}}
/*
3.renderScence
渲染场景
参数：route(第一步创建并设置给导航器的路由对象)，navigator(导航器对象)
实现：给需要显示的组件设置属性
*/
renderScene={(route, navigator) => {
// 从route对象中获取页面组件
var Component = route.component;
return (
<Component
navigator={navigator}
route={route}
/*传值*/
{...route.passProps}
/>
);
}}
/>
)
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4c4c4c',
},
});
AppRegistry.registerComponent('LessonNavigator', () => LessonNavigator);
