我们如何在 React Native 中使用 navigationOptions 将状态作为 props 传递给功能组件？答案

【问题标题】：How can we pass state as props in functional component using navigationOptions in React Native?我们如何在 React Native 中使用 navigationOptions 将状态作为 props 传递给功能组件？
【发布时间】：2020-03-24 14:20:07
【问题描述】：

我是 React Native 的新手，我想问一下如何使用 navigationOptions 将功能组件中的钩子状态传递到另一个屏幕

代码如下：

const Screen = props => {
const [eventName, setEventName] = useState('');

  React.useLayoutEffect(() => {
    props.navigation.setOptions({
      headerRight: () => (

        <HeaderButtons HeaderButtonComponent={HeaderButton}>
          <Item 
            title="Finish"
            iconName={Platform.OS === 'adroid' ? 'done-all' : 'done-all'}
            onPress={() => {
              props.navigation.navigate('TripsListDetailScreen', {
                final_eventName: eventName,

              })
            }}
          />
      </HeaderButtons>
    )
    });
  }, [props.navigation]);

return(...);
}

我正在尝试将eventName 传递到另一个屏幕。由于我们必须在组件外部使用navigationOptions 来设置headerRight 的样式，例如：

Screen.navigationOptions = data => {
    return(
        headerTitle:...,
        headerRight: ....

)
}

我们不能在那里传递参数。所以我尝试了React.useLayoutEffect() 中描述的docs

但是屏幕抛出错误：

请帮忙

【问题讨论】：

props.navigation.setOptions 很可能是undefined。你能检查一下它为console.log(props.navigation) 记录了什么吗？
它像往常一样记录：| {“actions”：{“dismiss”：[函数关闭]，“goBack”：[函数 goBack]，“navigate”：[函数导航]，“pop”：[函数 pop]，“popToTop”：[函数 popToTop] , "push": .....对不起，字数有限，我不能给你更多:(
顺便说一句，我使用的是 v.4。 docs v4 没有讨论如何使用功能组件来做到这一点。所以我使用 v5 指南
哦它没有setOptions功能。是这个问题吗？
是的，因为您正试图将其作为props.navigation.setOptions({ }) 之类的函数调用。对于 setOptions 的 undefined 值，这是不可能的。

标签： javascript reactjs react-native react-navigation

【解决方案1】：

我知道现在问题出在哪里。当我记录props.navigation 时，它没有setOptions 功能。此外，当我回顾文档时，我发现这是因为我使用的版本。

我使用的是 reac-navigation v4，但 props.navigation.setOptions 仅在 v5 中可用。

可惜了:(

感谢@norbitrial 为我指出这一点

如果您有任何关于版本问题的问题的答案，我很高兴知道！

【讨论】：