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);
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'
}
});
}
}
import React,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,margin:10}}>这是第二个页面,点击可以回到上个页面</Text>
</TouchableOpacity>
</View>);
}
/** * 跳转到下一个页面 */
jumpToFirst() {
/* push(route) 跳转到新的场景,并且将场景入栈,你可以稍后用jump forward 跳转回去*/
this.props.navigator.push({
component: FirstPage,});
}
}
Navigator的其它属性及介绍可以参考:http://www.tuicool.com/articles/aQVFJny