反应导航（V2 / V3）：如何在屏幕上的NavigationOptions中访问navigation.state.index

J·海丝特

我正在构建一个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）的屏幕截图。

J·海丝特

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。