使用 Apollo 时如何设置 navigationOptions？

Posted 2023-03-10

【中文标题】使用 Apollo 时如何设置 navigationOptions？

【英文标题】：How can I set navigationOptions when using Apollo?

【发布时间】：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？

【参考方案1】：

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

export default hoistNonReactStatics(DemoMutation, DemoComponent);