使用 Apollo 时如何设置导航选项？

Question

我正在使用 React Navigation 和 Apollo 开发 React Native 应用程序。

要设置header标题，通常使用navigationOptions:

class DemoComponent extends React.Component {

  public static navigationOptions = ({navigation}) => ({
    title: navigation.getParam("myParam", "Default title")
  })

  public render() {
    // ...
  }

}

使用 Apollo，我将我的组件包装在另一个组件中：

export default () => (
  <DemoMutation mutation={DEMO_MUTATION}>
    {(mutation, result) => <DemoComponent mutation={mutation} result={result} />}
  </JoinGroupMutation>
);

这意味着 navigationOptions 永远不会被读取，并且 header 标题是空的。我试过将 navigation 作为 props 传递下去，但这不起作用（navigationOptions 是一个静态函数，不依赖于 props）。

我能想到一个解决方法，例如使用自定义 header 组件，然后从 <DemoMutation> 组件传递 navigation 道具，然后手动调用 navigation.setParam()。不过，这似乎有点违反直觉——有没有更直接的方法在嵌套组件中使用 navigationOptions？

Answer 1

这个问题的解决方案是将静态函数提升到高阶组件。有一个名为 hoist-non-react-statics 的库正是这样做的。

export default hoistNonReactStatics(DemoMutation, DemoComponent);

使用 Apollo 时如何设置导航选项？

How can I set navigationOptions when using Apollo?

apollo

react-native

react-navigation