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

2023-12-18 22:38

本文主要是介绍React Native 页面之间传值、回传数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

http://blog.csdn.net/liu__520/article/details/52886493

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

首先分三个页面: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页面:




这篇关于React Native 页面之间传值、回传数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/510006

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06