react-navigation goBack()传值

最新推荐文章于 2025-04-08 15:13:22 发布

潇遥快乐

最新推荐文章于 2025-04-08 15:13:22 发布

阅读量4.7k

点赞数

分类专栏： React Native 文章标签： react-navigation

本文链接：https://blog.youkuaiyun.com/hxy19971101/article/details/97784969

版权

React Native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用React Native实现的ViewA与ViewB组件之间的数据传递案例。通过props和回调函数，ViewA能够向ViewB传递一个选择状态，并在ViewB中通过onSelect回调将数据回传给ViewA，实现子组件向父组件的数据反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ViewA跳转到ViewB

import React from "react";
import { Button, Text, View } from "react-native";

class ViewA extends React.Component {
  state = { selected: false };

  onSelect = data => {
    this.setState(data);
  };

  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect });
  };

  render() {
    return (
      <View>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

ViewB

import React from "react";
import { Button } from "react-native";

class ViewB extends React.Component {
  goBack() {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.state.params.onSelect({ selected: true });
  }

  render() {
    return <Button title="back" onPress={this.goBack} />;
  }
}

语法类似于React中子组件向父组件传值。