效果图：
进入工作目录，运行
react-native init NavigatorProject
创建项目NavigatorProject
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native';class navigatorProject extends Component{
render(){
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;
return(
<Navigator
initialRoute = {{name: defaultName, component: defaultComponent}} //初始化导航器Navigator,指定默认的页面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight; //配置场景动画，页面之间跳转时候的动画
}
}
renderScene = {
(route, navigator) =>{
let Component = route.component;
return <Component{...route.params} navigator = {navigator} /> //渲染场景
}
}
/>
);
}
}//第一个页面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({ //navigator.push 传入name和你想要跳的组件页面
name: "SecondPageComponent",
component: SecondPageComponent
});
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第一个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击进入第二个页面</Text>
</TouchableHighlight>
</View>
);
}
}//第二个页面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.pop(); //navigator.pop 使用当前页面出栈, 显示上一个栈内页面.
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第二个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击返回第一个页面</Text>
</TouchableHighlight>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});
AppRegistry.registerComponent('navigatorProject', () => navigatorProject);延伸：传参。
以上面的代码为基础。
一：
效果图：
//第一个界面
class FirstPageComponent extends Component{
constructor(props){
super(props);
//参数来源
this.state = {
author: '华帅'
};
} clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({
name: "SecondPageComponent",
component: SecondPageComponent,
//传递参数，入栈
params: {
author: this.state.author,
}
});
}
} render(){
return(
<View style = {styles.container}>
<Text>我是第一个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)} >
<Text>点击进入第二个页面</Text>
</TouchableHighlight>
</View>
);
}
}
//第二个页面
class SecondPageComponent extends Component{
constructor(props) {
super(props);
this.state = {};
} //接收传递过来的参数
componentDidMount() {
this.setState({
author: this.props.author,
});
} clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.pop();
}
} render(){
return(
<View style = {styles.container}>
<Text>我是第二个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击返回第一个页面</Text>
</TouchableHighlight>
<Text>作者是：{this.state.author}</Text>
</View>
);
}
}
二：
效果图：
//第一个页面
class FirstPageComponent extends Component{
constructor(props){
super(props);
//参数来源
this.state = {
author: "华帅",
id: 1,
user: null,
};
}
clickJump(){
const{navigator} = this.props;
const self = this;
if(navigator){
navigator.push({
name: "SecondPageComponent",
component: SecondPageComponent,
//传递参数，入栈
params:{
author: this.state.author,
id: this.state.id,
//从第二页获取user
getUser: function(user){
self.setState({
user: user
});
}
}
});
}
}
render(){
if(this.state.user){
return(
<View>
<Text style = {styles.container}>用户信息：{JSON.stringify(this.state.user)}</Text>
</View>
);
}else{
return(
<View style = {styles.container}>
<Text>我是第一个页面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击进入第二个页面</Text>
</TouchableHighlight>
</View>
);
}
}
}const USER_MODELS = {
1: {name: '华帅', age: 44},
2: {name: '小明', age: 12}
};//第二个页面
class SecondPageComponent extends Component{
constructor(props){
super(props);
this.state = {
id:null
};
}
//接收传递过来的参数
componentDidMount(){
this.setState({
author: this.props.author,
id: this.props.id,
});
}
clickJump(){
const{navigator} = this.props;
if(this.props.getUser){
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
}
if(navigator){
navigator.pop();
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第二个页面</Text>
<Text>ID: {this.state.id}</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>点击返回第一个页面</Text>
</TouchableHighlight>
<Text>作者是：{this.state.author}</Text>
</View>
);
}
}