ReactNative官网例子练习（五）——页面跳转传参

上一篇文章练习了Rn中使用Navigator跳转页面。我们一个完成的应用中一般不仅仅是跳转页面，经常还会传一些参数到下一个界面。Rn中怎么实现传参呢？

例子代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

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

class RnWidget extends Component {

render() {
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;

return (
<Navigator
styles = {styles.container}
initialRoute = {{name: defaultName,component : defaultComponent}}
configureScene = {
(route)=>{
return Navigator.SceneConfigs.FloatFromRight
}
}
renderScene = {(route,navigator)=>{
let Component = route.component;
return <Component{...route.params} navigator={navigator}/>
}}
/>
)
}
}
//第一个界面
class FirstPageComponent extends Component{
constructor(props){
super(props);
this.state={
title :"title哈哈"
}
}
clickJump(){
//因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
const{navigator} = this.props;
let that = this;
if(navigator){
navigator.push({
name : "SecondPageComponent",
component : SecondPageComponent,
params :{
title:this.state.title,
id:123,
getUser:function(user){
that.setState({
user:user
})
}
}
})
}
}
render(){
return(
<View style={styles.container}>
<Text>我是第一个界面</Text>
<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击进入第二个界面</Text>
</TouchableHighlight>
<Text>第二个界面返回：{this.state.user}</Text>
</View>
)
}
}

//第二个界面
class SecondPageComponent extends Component{
constructor(props){
super(props);
this.state={
id:null
}
}
clickJump(){
if(this.props.getUser){
this.props.getUser("大海")
}
const{navigator} = this.props;
if(navigator){
//把当前页面pop掉 回到上一个页面
navigator.pop();
}
}

componentDidMount(){
this.setState({
title:this.props.title,
id:this.props.id
})
}
render(){
return(
<View style={styles.container}>
<Text>我是第二个界面</Text>

<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击返回第一个界面</Text>
</TouchableHighlight>

<Text>第一个界面传入：{this.state.title}</Text>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},

});
AppRegistry.registerComponent('RnWidget', () => RnWidget);

第一个页面传入到第二个页面

首先在第一个界面navigator.push的时候参数里面添加一个params的参数。里面就是我们想要传到下一个界面的数据。比如这里传个title

navigator.push({
name : "SecondPageComponent",
component : SecondPageComponent,
params :{
title:this.state.title,
}
})

第二个界面在生命周期函数componentDidMount()中给state赋值。componentDidMount是当render()完成的时候调用

componentDidMount(){
this.setState({
title:this.props.title,
})
}

第二个页面传回第一个页面

在第一个页面的push的参数params里面增加一个方法接收下一个页面传过来的参数然后更改当前的state中的值

params :{
title:this.state.title,
id:123,
getUser:function(user){
that.setState({
user:user
})
}
}

第二个页面在navigator.pop();之前调用第一个界面传过来的getUser方法。

if(this.props.getUser){
this.props.getUser("大海")
}

效果：