React Navigation (V2 / V3)：如何在屏幕上的 navigationOptions 中访问 navigation.state.index答案

【问题标题】：React Navigation (V2 / V3): How to access navigation.state.index in navigationOptions on screenReact Navigation (V2 / V3)：如何在屏幕上的 navigationOptions 中访问 navigation.state.index
【发布时间】：2018-11-23 08:33:56
【问题描述】：

我正在构建一个 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。）

【问题讨论】：

你能在 onPress 上放一个 'console.log(navigation)' 吗？
@kivul 完成！我编辑了问题。
我可能错了，但我没有看到 state.index。您的状态对象上有“key”、“params”和“routeName”
@kivul 是的，这正是问题所在。我想知道如何从屏幕访问index？ There is a way to access it while defining the navigator，但您无法从那里访问headerLeft。

标签： react-native react-navigation react-navigation-stack

【解决方案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
    })
  }
);

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

【讨论】：