Question

在我的应用程序中，很少有无法使用navigation.goBack（）的情况。我使用react-navigation进行导航。当我进入详细信息屏幕时，当我返回时，我想发送一个API调用以将最新记录发送到父屏幕。所以我用了navigation.navigate（）而不是navigation.goBack（）;但是，如果我多次导航回去，这会使我的应用程序变慢。如果再执行几次，它将变得非常缓慢。这背后的原因是什么？ navigation.navigate（）与navigation.goBack（）有何不同？

处理这种情况的首选方式是什么？

Answer 1

是否有一种方法可以从Navigation.goback（）传递参数，并且父级可以听这些参数并更新其状态？

您可以将回调函数作为参数传递（如其他答案所述）。

这是一个更清晰的示例，当您从A导航到B并希望B将信息传达回A时，您可以传递回调（此处为onSelect）：

ViewA.js

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.js

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} />;
  }
}

请停下来整理物品-请参阅https://github.com/react-navigation/react-navigation/issues/288#issuecomment-315684617

Navigation.goBack（）和React-Native中的API调用

1 个答案: