Перекомпоновать с реагированием-навигацией - как поднять заголовок статической навигации при использовании ветки?

Question

У меня есть следующее использование, которое устанавливает параметры заголовка реакции-навигации.Компонент расширяется с использованием различных компонентов HOC, а затем с помощью Recompose для ветвления логики рендеринга.

При рендеринге AuthCallToAction через renderWhileNoAuth параметры заголовка не поднимаются.В идеале я хотел бы, чтобы при отображении ветви логики 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, или я думаю об этом неправильно?

Answer 1

Я столкнулся с той же проблемой.Я не проверил это полностью, но похоже, что статические свойства класса не обрабатываются должным образом с помощью функций compose.

Решение, которое я нашел, было определить navigationOptions в функции навигатора, например

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

Вы также можете передать функцию в navigationOptions с подписью ({navigation}) => ({}) для доступа к свойствам навигации.