使用 react-navigation 重构 - 使用分支时如何提升静态导航标题？

Posted 2023-02-21

【中文标题】使用 react-navigation 重构 - 使用分支时如何提升静态导航标题？

【英文标题】：Recompose with react-navigation - how to hoist static navigation header when using branch?

【发布时间】：2019-08-29 18:33:50

【问题描述】：

我使用以下设置 react-navigation 标头选项。 该组件使用各种 HOC 组件进行增强，然后使用 Recompose 来分支渲染逻辑。

当通过 renderWhileNoAuth 渲染 AuthCallToAction 时，标头选项不会被提升。理想情况下，我希望在显示逻辑的 renderWhileNoAuth 分支时没有标题。

class ProfileScreen extends Component 
  static navigationOptions = 
    title: 'Profile',
    headerRight: (
      <Button
        onPress=() => alert('This is a button!')
        title="Logout"
        type="clear"
      />
    ),
  

  render() 
      <View><Text>Profile</Text></View>
  


const renderWhileNoAuth = () => branch(
  props => !props.authQuery.auth.status,
  renderComponent(() => (
    <AuthCallToAction
      icon="smiley"
      title="Come on now..."
      text="Of course you need to login to see your profile!"
    />
  )),
)

const enhancedComonent = compose(
  graphql(CACHE_AUTH_QUERY, 
    name: 'authQuery',
  ),
  renderWhileNoAuth(),
)

export default hoistStatics(enhancedComponent)(ProfileScreen)

组件 - AuthCallToActionScreen

标题：即使我使用提升静态，null 也不起作用

class AuthCallToActionScreen extends Component 
  static navigationOptions = 
    header: null,
  

  render() 
    return <View><Text>Auth Call To Action - No Header required</Text></View>
  


export default withNavigation(AuthCallToActionScreen)

那么问题是，我如何从 AuthCallToAction 提升 navigationOptions，还是我想错了？

【参考方案1】：

我遇到了同样的问题。我还没有彻底测试它，但看起来静态类属性没有用 compose 函数正确处理。

我找到的一个解决方案是在导航器函数中定义navigationOptions，例如

const AppStack = createStackNavigator(
  navigationOptions: 
    title: 'App Title',
  ,
  screen: AppScreen,
)

您还可以将带有签名(navigation) => () 的函数传递给navigationOptions 以访问导航属性。