javascript - 如何在React中通过HOC传递静态NavigationOptions？

我想做一个HOC，将navigationOptions传递给传递的组件。

const withNavigationOptions = Component => ({ ...props }) => {
  const ComponentWithNavigation = Component;
  ComponentWithNavigation.navigationOptions = ({ navigation }) => {
    const { title } = navigation.state.params;
    return {
      header: (
        <Navbar
          navigation={navigation}
          title={title}
          onBackPress={() => navigation.navigate('Dashboard')}
        />
      )
    };
  };

  return <ComponentWithNavigation {...props} />;
};

export default withNavigationOptions;

但是静态选项未分配给返回的组件。任何帮助将不胜感激。

最佳答案

将NavigationOptions传递给呈现的组件的正确方法是将其作为道具传递。

const withNavigationOptions = Component => ({ ...props }) => {
  const ComponentWithNavigation = Component;
  const navigationOptions = ({ navigation }) => {
    const { title } = navigation.state.params;
    return {
      header: (
        <Navbar
          navigation={navigation}
          title={title}
          onBackPress={() => navigation.navigate('Dashboard')}
        />
      )
    };
  };

  return <ComponentWithNavigation {...props} navigationOptions={navigationOptions} />;
};

export default withNavigationOptions;

在您的情况下，不会将static选项提供给返回的组件，因为您将其添加到了呈现的组件而不是返回的功能组件上。

关于javascript - 如何在React中通过HOC传递静态NavigationOptions？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57985478/