时间戳

首页 > 解决方案 > React Navigation (V2 / V3)：如何在屏幕上的 navigationOptions 中访问 navigation.state.index

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

问题描述

我正在构建一个 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。） 在此处输入图像描述

标签： react-nativereact-navigationreact-navigation-stack

解决方案

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

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

推荐阅读