Navigator用来实现不同页面的切换,想设置Navigator,必须确定一个或多个调用routes对象,去定义每个场景。
还可以利用renderScene方法,导航栏可以根据指定的路由来渲染场景。
//项目的入口index.android.js页面
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
Navigator
} from 'react-native';
import FirstPage from './FirstPage'
export default class StudyGithub extends Component {
constructor(props) {
super(props);
this.state = {}
}
renderScene(route, navigator) {
let Component = route.component;
return (
<Component {...route.params} navigator={navigator}/>
);
}
render() {
return (
<Navigator
initialRoute={{
name: 'FirstPage',
component:FirstPage
}}
renderScene={(e, i)=>this.renderScene(e, i)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
tabText: {
fontSize: 10,
color: 'black'
},
selectedTabText: {
fontSize: 10,
color: 'red'
},
icon: {
width: 22,
height: 22
},
page0: {
flex: 1,
backgroundColor: 'yellow'
},
page1: {
flex: 1,
backgroundColor: 'blue'
}
});
AppRegistry.registerComponent('StudyGithub', () => StudyGithub);
跳转到第一个页面FirstPage.js
import React, {Component} from 'react';
import {
StyleSheet,
Navigator,
TouchableOpacity,
Text,
View
} from 'react-native'
import SecondPage from './SecondPage'
export default class FirstPage extends Component {
constructor(props) {
super(props);
}
render() {
return (<View>
<TouchableOpacity
onPress={()=>this.jumpToNext()}>
<Text style={{fontSize:20,color: 'blue',margin:10}}>这是第一个页面,点击可以跳转到下一个页面</Text>
</TouchableOpacity>
</View>);
}
/**
* 跳转到下一个页面
*/
jumpToNext() {
/* resetTo(route) 跳转到指定的新场景,并重置路由栈*/
this.props.navigator.resetTo({
component: SecondPage,
/* 传递参数*/
params: {
text: 'jump to the second page'
}
});
}
}
从FirstPage跳转到SecondPage.js页面
import React, {Component} from 'react';
import {
StyleSheet,
Navigator,
TouchableOpacity,
Text,
View
} from 'react-native'
import FirstPage from './FirstPage'
export default class SecondPage extends Component {
constructor(props) {
super(props);
}
render() {
return (<View>
<Text style={{fontSize:20,color: 'red',margin:10}}>{this.props.text}</Text>
<TouchableOpacity
onPress={()=>this.jumpToFirst()}>
<Text style={{fontSize:20,color: 'red',margin:10}}>这是第二个页面,点击可以回到上个页面</Text>
</TouchableOpacity>
</View>);
}
/**
* 跳转到下一个页面
*/
jumpToFirst() {
/* push(route) 跳转到新的场景,并且将场景入栈,你可以稍后用jump forward 跳转回去*/
this.props.navigator.push({
component: FirstPage,
});
}
}
Navigator的其它属性及介绍可以参考:http://www.tuicool.com/articles/aQVFJny