React Native 页面之间传值、回传数据

来源：互联网发布：nginx 网络模型编辑：程序博客网时间：2024/06/14 07:11

很多同行最近都在苦思冥想一个问题：RN从A页面传值到B页面简单，但是我怎么从B页面传值到A页面呢，头大了！

下面我写了一个简单的示例，请各位同行参考下：

首先分三个页面：index.android.js，first.js（简称A页面），next.js（简称B页面）

一、我们知道从A页面到B页面，是在navigator里面把值放进去，作为B页面的参数，B页面通过属性值获得这个参数：

下面这是index.android.js的内容

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

import FirstPage from './first';
class First extends Component {
constructor(props){
super(props);
this.state={
name:'刘成',
age:28,
QQ:null
}
}
render() {
let defaultName = 'firstpage';
let defaultComponent = FirstPage;
return (
<Navigator
initialRoute={{name:defaultName,component:defaultComponent}}
renderScene={
(route,navigator)=>{
let Component = route.component;
return <Component {...route.params} navigator={navigator}/>
}
}/>
);
}
}
AppRegistry.registerComponent('first', () => First);

下面这是first.js（A页面）的内容

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Next from './next';
export default class FirstPage extends Component {
constructor(props){
super(props);
this.state={
myname:'刘成',
age:28,
QQ:null,
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
第一页，我要把我的姓名、年龄传递给第二个页面，再从第二个页面把我的QQ号传回来
</Text>
<Text style={styles.instructions}>
我的姓名：{this.state.myname}
</Text>
<Text style={styles.instructions}>
我的年龄：{this.state.age}
</Text>

<Text style={{color:'blue',fontSize:20}}>
我的QQ：{this.state.QQ}
</Text>
<Text style={{color:'red',fontSize:30}} onPress={this.gotoSecondPage}>
点击我查询我的QQ
</Text>
</View>
);
}
gotoSecondPage=()=>{
const {navigator}=this.props;
if (navigator) {
navigator.push({
name:'next',
component:Next,
params:{
myname:this.state.myname,
age:this.state.age,
getQQ:(qq)=>{
this.setState({
QQ:qq
})
}
}
})
}
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

下面这是next.js（B页面）的内容

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

export default class Next extends Component {
constructor(props){
super(props);
this.state={
myname:this.props.myname,
age:this.props.age,
QQ:674668211
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
第二页，把他的QQ号告诉他
</Text>
<Text style={styles.instructions}>
我的姓名：{this.props.myname}
</Text>
<Text style={styles.instructions}>
我的年龄：{this.props.age}
</Text>

<Text style={styles.instructions}>
我的QQ：{this.state.QQ}
</Text>
<Text style={{color:'red',fontSize:30}} onPress={this.gotoFirstPage}>
回到上一页
</Text>
</View>
);
}
gotoFirstPage=()=>{
const {navigator}=this.props;
let QQ = this.state.QQ;
this.props.getQQ(QQ);
if (navigator) {
navigator.pop();
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

首先：我把我的姓名和年龄传值给B页面，然后把B页面我的QQ传递到A页面，

A页面在navigator里面给一个参数：getQQ，这个参数的值是一个方法，方法里面又有一个参数qq，方法体的内容是把A页面的QQ的状态设置为qq的值；

下面我们要从B页面获得这个qq参数值：

gotoSecondPage=()=>{
const {navigator}=this.props;
if (navigator) {
navigator.push({
name:'next',
component:Next,
params:{
myname:this.state.myname,
age:this.state.age,
getQQ:(qq)=>{
this.setState({
QQ:qq
})
}
}
})
}
}

首先在B页面pop之前，我们给B页面的属性getQQ一个值，B页面的getQQ这个属性就是从A页面传过来的，这个属性其实就是一个函数，函数的参数就是B页面的QQ值

gotoFirstPage=()=>{
const {navigator}=this.props;
let QQ = this.state.QQ;
this.props.getQQ(QQ);
if (navigator) {
navigator.pop();
}
}

这样我们就把QQ值传递给A页面：

0 0