React Native 基础篇之Navigator页面的跳转与数据的传递

这里通过一个简单的例子来阐述Navigator页面的跳转与数据的传递：

查询用户信息的例子，FirstPageComponent传递id到SecondPageComponent，然后SecondPageComponent返回user信息给FirstPageComponent

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Navigator,
Text,
View
} from 'react-native';

import FirstPageComponent from "./FirstPageComponent";

export default class SampleComponent extends Component {

constructor(props){
super(props);
this.state = {
};
}

render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
<Navigator
//这个指定了默认的页面，也就是启动app之后会看到界面的第一屏
initialRoute={{ name: defaultName, component: defaultComponent }}
//这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，
//有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
//route就是传递的name,component，navigator是一个Navigator的对象
renderScene={(route, navigator) => {
let Component = route.component;
/**
*
... JSX的延展属性
var props = {};
props.propA = x;
props.propB = y;
var component = <Component {...props}/>
这样 component 这个JSX元素有了props变量的所有属性
navigator作为props传递给了这个component
*/
return <Component {...route.params} navigator={navigator} />
}} />
);
}

}

const styles = StyleSheet.create({
counter:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#e8e8e8'
}
});

FirstPageComponent.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Navigator,
TouchableOpacity,
View
} from 'react-native';

import SecondPageComponent from "./SecondComponent";

export default class FirstPageComponent extends Component {

constructor(props){
super(props);
this.state = {
id: 2,
user: null,
};
_this = this;
}

render() {
if(_this.state.user){
return(
<View style={styles.counter}>
<Text>用户信息: {JSON.stringify(_this.state.user)}</Text>
</View>
);
} else {
return (
<View style={styles.counter}>
<TouchableOpacity onPress={()=>{_this._pressButton()}}>
<Text>查询ID为{_this.state.id}的用户信息</Text>
</TouchableOpacity>
</View>
);
}

}

_pressButton(){
const {navigator} = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
/**页面间数据的传递 与将第二个页面如何将结果返回给第一个页面的方法
*
* 1.通过push,传递参数
*   这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
*   id
* 2.把上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state
*/
params: {
id: _this.state.id,
getUser(user) {
_this.setState({
user: user
})
},
}
})
}
}
}

const styles = StyleSheet.create({
counter:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#e8e8e8'
}
});

SecondComponent.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Navigator,
TouchableOpacity,
View
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

const USER_MODELS = {
1: { name: 'mot', age: 23 },
2: { name: '晴明大大', age: 25 }
};

export default class SecondComponent extends Component {

constructor(props){
super(props);
this.state = {
id: null
};
_this = this;
}

_pressButton() {
const {navigator} = _this.props;
if (_this.props.getUser) {
let user = USER_MODELS[_this.props.id];
_this.props.getUser(user);
}
if (navigator) {
//把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent
navigator.pop();
}
}

componentDidMount() {
this.setState({id:_this.props.id});
}

render() {
return (
<View style={styles.counter}>
<Text>获得的参数:{_this.state.id}</Text>
<TouchableOpacity onPress={()=>{_this._pressButton()}}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}

}

const styles = StyleSheet.create({
counter:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#e8e8e8'
}
});

链接：http://pan.baidu.com/s/1qXOnMAK 密码：xq34