React Navigation (V2 / V3): как получить доступ к navigation.state.index в navigationOptions на экране

Я создаю приложение React Native и для навигации использую React Navigation (V3). Для своих элементов пользовательского интерфейса я использую React Native Elements.

У меня есть экран, который я использую в нескольких навигаторах. Иногда он находится в корне стека, а иногда он проталкивается вместе со стеком. Я хочу программно добавить элемент headerLeft на этот экран navigationOptions в зависимости от его положения в стеке, потому что я хочу, чтобы отображалась либо кнопка возврата по умолчанию, либо значок меню бургера, если экран находится в корне стека ( потому что стек вложен в ящик).

Итак, я попробовал следующее:

export class ScannerScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft:
      navigation.state.index > 0 ? (
        undefined 
      ) : (
        <Icon type="ionicon" name="ios-menu" onPress={navigation.toggleDrawer} />
      ),
    title: strings.scannerTitle
  });
// ...

Проблема в том, что это не работает, поскольку navigation.state.index здесь undefined. Как это сделать с помощью навигации React?

Изменить: По запросу я добавил снимок экрана с console.log(navigation) (через <Icon />s onPress.) введите описание изображения здесь


react-native react-navigation react-navigation-stack
person J. Hesters    schedule 23.11.2018    source источник
comment
не могли бы вы поместить "console.log (навигация)" в onPress?   -  person kivul    schedule 23.11.2018
comment
@kivul Готово! Редактировал вопрос.   -  person J. Hesters    schedule 23.11.2018
comment
Возможно, я ошибаюсь, но я не вижу state.index. У вас есть 'key', 'params' и 'routeName' на вашем объекте состояния   -  person kivul    schedule 23.11.2018
comment
@kivul Да в этом и проблема. Мне было интересно, как я могу получить доступ к index с экрана? Есть способ получить к нему доступ при определении навигатора, но вы не можете получить доступ к headerLeft оттуда.   -  person J. Hesters    schedule 23.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел hacky решение, и это нормально, но мне оно немного не нравится:

const stackConfig: StackNavigatorConfig = {
  cardStyle: styles.card,
  navigationOptions: {
    headerBackTitleStyle: styles.headerBackTitle,
    headerStyle: styles.header,
    headerTintColor: "black"
  }
};

const HomeStack = createStackNavigator(
  { HomeScreen, RestaurantDetailScreen, MenuScreen, ScannerScreen },
  {
    ...stackConfig,
    initialRouteName: "HomeScreen",
    navigationOptions: ({ navigation }) => ({
      headerLeft:
        parseFloat(navigation.state.key.slice(-1)) > 1 ? (
          undefined
        ) : (
          <Icon
            containerStyle={styles.leftIcon}
            type="ionicon"
            name={getIconName("menu")}
            onPress={navigation.toggleDrawer}
          />
        ),
      ...stackConfig.navigationOptions
    })
  }
);

Таким образом он автоматически устанавливает его для всего стека. Вы также можете сделать это в отдельных параметрах навигации на соответствующем экране. Но это работает только потому, что автоматически назначенная клавиша для экрана содержит его индекс.

person J. Hesters    schedule 23.11.2018