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

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

При рендеринге 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)

Тогда возникает вопрос: как мне поднять navigationOptions из AuthCallToAction, или я думаю об этом неправильно?


react-native react-navigation higher-order-components recompose
person Lee    schedule 08.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person Ian Henderson    schedule 11.06.2019