使用阿波罗时如何设置导航选项

Question

我正在开发一个带有 React Navigation 和 Apollo 的 React Native 应用程序。

要设置标题，通常使用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永远不会被读取，并且标题为空。我尝试将navigation作为道具传递，但这不起作用(navigationOptions是一个静态函数，不依赖于道具(。

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

Answer 1

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

export default hoistNonReactStatics(DemoMutation, DemoComponent);