时间戳

首页 > 解决方案 > 使用 react-navigation 重构 - 使用分支时如何提升静态导航标题？

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

问题描述

我使用以下设置 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，还是我想错了？

标签： react-nativereact-navigationhigher-order-componentsrecompose

解决方案

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

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

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

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

推荐阅读