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是静态函数，不依赖道具）。

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

Answer 1

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

export default hoistNonReactStatics(DemoMutation, DemoComponent);

使用Apollo时如何设置navigationOptions？

1 个答案: