使用 Apollo 时如何设置 navigationOptions？答案

【问题标题】：How can I set navigationOptions when using Apollo?使用 Apollo 时如何设置 navigationOptions？
【发布时间】：2019-07-03 12:08:21
【问题描述】：

我正在使用 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 属性，然后手动调用navigation.setParam()。不过，这似乎有点违反直觉——有没有更直接的方法在嵌套组件中使用navigationOptions？

【问题讨论】：

标签： react-native react-navigation apollo

【解决方案1】：

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

export default hoistNonReactStatics(DemoMutation, DemoComponent);

【讨论】：