欢迎光临，客官里边请
前言：
我本是一枚安静的iOS程序猿，记得那是一个月黑风高夜，公司五楼只有我和经理两人，而我正在看电影《死寂》。忽然，感觉有人摸我的肩，顿时菊花一紧，猛然回头，好吧，就知道是经理。找我说了一堆，大致就是以后尝试用React Native开发iOS和Android，虽然我有点不情愿，但谁让我是小弟呢，只好开始学习这个东东。
好了，闲蛋扯完了，下面进入主题：今天要讲的就是React Native页面跳转、传值与回调。
正文：
注：
- 代码是ES6语法，不懂得可以到这瞅瞅阮老师ES6入门，还有这个ES5,ES6写法对照。
- 我今天就站在巨人的肩膀上更深层次的剖析一下，以这个日志新手理解Navigator的教程为基础讲解，如果大家看懂了这个日志，那我讲的你们就不要看了，浪费亲们时间，我们只讲精华。
- 共涉及三个js文件，
SampleComponent.js注册程序入口,FirstPageComponent.js页面一,SecondPageComponent.js页面二。
Let's do it
先分析下面这段代码：SampleComponent.js
import React from 'react';
import {
View,
Navigator,
AppRegistry
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
//这个语法是把 routes.params 里的每个key作为props的一个属性，在下个页面即可用this. props.id调用
//navigator对象在导航容器跳转时一直存在
return <Component {...route.params} navigator={navigator} />
}}
/>
);
}
}
FirstPageComponent.js:
//FirstPageComponent.js
import React from 'react';
import {
View,
Navigator
} from 'react-native';
import SecondPageComponent from './SecondPageComponent';
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 2,
user: null,
}
}
_pressButton() {
let _this = this;
const { navigator } = this.props;
//为什么这里可以取得 props.navigator?请看上文:
//<Component {...route.params} navigator={navigator} />
//这里传递了navigator作为props
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
//这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
//routes.params 里的每个key 作为props的一个属性:
//这里的 params.id 就变成了 <Navigator id={} 传递给了下一个页面
params: {
id: this.state.id,
//回调!从SecondPageComponent获取user
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
render() {
if( this.state.user ) {
return(
<View>
<Text>用户信息: { JSON.stringify(this.state.user) }</Text>
</View>
);
}else {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>查询ID为{ this.state.id }的用户信息</Text>
</TouchableOpacity>
</View>
);
}
}
}
SecondPageComponent.js：
const USER_MODELS = {
1: { name: 'mot', age: 23 },
2: { name: '晴明大大', age: 25 }
};
import React from 'react';
import {
View,
Navigator
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
id: null
}
}
componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数: id
this.setState({
id: this.props.id
});
}
_pressButton() {
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>
<Text>获得的参数: id={ this.state.id }</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
