Question

我已经有了屏幕1，可以使用以下内容从屏幕1导航到屏幕2：

navigation.navigate('Screen2')

在此屏幕上，我想转到上一个，它很简单：

navigation.goBack()

但是我想知道如何将一些数据传回Screen1？ navigation.goBack({ myData: 'something' })之类的东西无法正常工作，所以我想知道一般建议采用哪种方法？

Answer 1

您可以通过2种方法解决它：

1：使用导航方法

通过导航调用该屏幕时传递一种方法：

this.props.navigation.navigate('Screen2', {
  onGoBack: this.refresh,
});

refresh=(data)=> {

}

，然后按回车键时，传递数据

this.props.navigation.state.params.onGoBack('123');
this.props.navigation.goBack();

2：使用Redux存储

如果您在应用程序中使用redux，则只要用户按下后退按钮就可以更新redux存储，并在上一屏幕中获取存储值。

Answer 2

您可以像这样传递回调（onSelect）：

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

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

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

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

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

// SCREEN 2
import React from "react";
import { Button } from "react-native";

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

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

Answer 3

如果您使用的是v2或更高版本，则另一种可能性是使用navigate函数，提供您要返回的路线的key / routeName和{{1 }}。 docs：https://reactnavigation.org/docs/en/navigation-actions.html#navigate

使用Navigation.goBack（）时如何将数据发送回先前的场景？

3 个答案: