在 react-navigation 5 中将函数作为参数传递

IT技术 reactjs react-native react-navigation
2021-03-26 02:59:19

注意：此查询适用于 react-navigation 5。

在react导航 4 中，我们可以在导航时将函数作为参数传递，但在react导航 5 中，它会引发有关序列化参数的警告。

基本上，我想要做的是，从父屏幕导航到子屏幕，获取新值并更新父屏幕的状态。

以下是我目前正在实施的方式：

父屏幕 

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

<TouchableOpacity
    style={ styles.countrySelector }
    activeOpacity={ 0.7 }
    onPress={ () => Navigation.navigate("CountrySelect",
        {
             onSelect: this._onSelectCountry,
             countryCode: this.state.country_code,
        })
    }
>
.
.
.
</TouchableOpacity>

儿童屏幕 

_onPress = (country, country_code, calling_code) => {
    const { navigation, route } = this.props;
    navigation.goBack();
    route.params.onSelect({
        country_name: country,
        country_code: country_code,
        calling_code: calling_code
    });
};
3个回答

除了onSelect在 params中传递函数之外，您还可以使用navigate将数据传递回上一个屏幕：

// `CountrySelect` screen
_onPress = (country, country_code, calling_code) => {
  const { navigation, route } = this.props;
  navigation.navigate('NameOfThePreviousScreen', {
    selection: {
      country_name: country,
      country_code: country_code,
      calling_code: calling_code
    }
  });
};

然后，您可以在您的第一个屏幕（在componentDidUpdate或 中useEffect）处理此问题：

componentDidUpdate(prevProps) {
  if (prevProps.route.params?.selection !== this.props.route.params?.selection) {
    const result = this.props.route.params?.selection;

    this._onSelectCountry(result);
  }
}
不，这是一个错字
2021-06-01 02:59:19
不，如果您已经访问过该屏幕，则导航行为类似于 goBack
2021-06-12 02:59:19
中的,s 是this.props.route,params?.selection故意的componentDidUpdate吗？
2021-06-16 02:59:19
行。我会尝试一下，然后让你知道。我很好奇的另一件事，如您所展示的上述代码段，如果用户导航到子屏幕，选择一个将用户导航回父屏幕然后用户按下硬件后退按钮的国家/地区会发生什么? 他会被带回儿童屏幕吗？
2021-06-17 02:59:19
我还有一个问题，如果你有时间我可以在这里使用一些帮助：stackoverflow.com/q/59799843/3697102
2021-06-18 02:59:19

不建议通过 react native 导航参数传递回调，这可能会导致状态冻结（无法正确更新）。这里更好的解决方案是使用 EventEmitter，因此回调保留在 Screen1 中，并在 Screen2 发出事件时调用。

屏幕 1 代码：

import {DeviceEventEmitter} from "react-native"

DeviceEventEmitter.addListener("event.testEvent", (eventData) => 
callbackYouWantedToPass(eventData)));

屏幕 2 代码：

import {DeviceEventEmitter} from "react-native"

DeviceEventEmitter.emit("event.testEvent", {eventData});

useEffect(() => {
return () => {
    DeviceEventEmitter.removeAllListeners("event.mapMarkerSelected")
  };
}, []);
从“react-native”导入 {DeviceEventEmitter}
2021-05-23 02:59:19
最好也删除屏幕 1 中的侦听器
2021-06-06 02:59:19

在某些情况下，您必须将函数作为参数传递给屏幕。

例如，您有第二个（独立的）NavigationContainer在 a 内呈现Modal，Modal当您在某个屏幕内按 Done 时，您必须隐藏（关闭）该组件。

我看到的那一刻唯一的解决办法是把里面的东西一个Context.Provider，然后使用Context.Consumer屏幕调用实例方法hide()的Modal。

其它你可能感兴趣的问题
上一篇React：“重定向”不是从“react-router-dom”导出的 下一篇React JSX 文件的 W3C HTML 验证