1

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

4

1 回答 1

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
    })
  }
);

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

于 2018-11-23T09:57:50.023 回答