React Navigation（V2 / V3）：如何在屏幕上的导航选项中访问 navigation.state.index

Question

我正在构建一个 React Native 应用程序，我使用 React Navigation (V3) 进行导航。对于我的 UI 元素，我使用 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。）

Answer 1

我找到了一个 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
    })
  }
);

这样它会自动为整个堆栈设置它。您也可以在相应屏幕的单独导航选项中执行此操作。但这只有效，因为屏幕的自动分配键包含它的索引。

React Navigation（V2 / V3）：如何在屏幕上的导航选项中访问 navigation.state.index

React Navigation (V2 / V3): How to access navigation.state.index in navigationOptions on screen

react-native

react-navigation

react-navigation-stack