Question

我目前有一个AppContainer，它由一个底部标签导航器和一个针对配置文件设置的导航集组成。我试图了解如何正确安排所有内容，特别是如何在一个标签Profile中嵌套导航，以便可以通过两个按钮分别访问另外两个页面QrCode和EditAccount。如何获得以下输出？我相信我必须以某种方式嵌套个人资料导航。

下面的我的标签

首页
队列
个人资料 ：在这里，我还有另外两个页面，我可以访问 QRCode 和 EditAccounts

App.js

    const bottomTabNavigator = createBottomTabNavigator(
      {
        Home: {
          screen: Home,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              <Icon name="home" size={25} color={tintColor} />
            )
          }
        },
        Queue: {
          screen: Queue,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              <Icon name="comments" size={25} color={tintColor} />
            )
          }
        },
Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="user" size={25} color={tintColor} />
        )
      }
    }
})

const navigationOptions = ({ navigation }) => {
  return { 
    headerTitle: 'hello',
    headerStyle: {
      height: '45%',
      backgroundColor: 'black'
    },
    headerTintColor: 'white',
    headerLeft: (
      <TouchableWithoutFeedback 
          style={{ /* Put your style here */}}
          onPress={() => navigation.goBack()} >
          <Ionicons  name="ios-arrow-dropleft" size={32} color="white" />
      </TouchableWithoutFeedback>
    )
  }
}

const ProfileNavigator = createStackNavigator({
  //Profile: { screen: Profile},
  QR: { screen: GenerateQR, navigationOptions },
  Profile: { screen: Profile },
  EditAccount: { screen: EditAccount, navigationOptions }
});

const AppNavigator = createSwitchNavigator({
  tabs: bottomTabNavigator,
  profile: ProfileNavigator
})

const AppContainer = createAppContainer(AppNavigator);

应用答案后

该解决方案可根据需要提供以下代码：

  const navigationOptions = ({ navigation }) => {
      return { 
        headerTitle: 'hello',
        headerStyle: {
          height: '45%',
          backgroundColor: 'black'
        },
        headerTintColor: 'white',
        headerLeft: (
          <TouchableWithoutFeedback 
              style={{ /* Put your style here */}}
              onPress={() => navigation.goBack()} >
              <Ionicons  name="ios-arrow-dropleft" size={32} color="white" />
          </TouchableWithoutFeedback>
        )
      }
    }

    const ProfileNavigator = createStackNavigator({
      Profile: { screen: Profile},
      QR: { screen: GenerateQR, navigationOptions },
      EditAccount: { screen: EditAccount, navigationOptions }
    });

//ADDED
ProfileNavigator.navigationOptions = () => {
  const navigationOptions = {
    header: null,
    headerMode: 'none',
  };
  return navigationOptions;
};


    const AppNavigator = createSwitchNavigator({
      tabs: bottomTabNavigator,
      profile: ProfileNavigator
    })

    const AppContainer = createAppContainer(AppNavigator);

唯一的问题是我不确定如何将标头选项移植到bottomTabNavigator中的选项卡上。我在个人资料页面上放置了一个自定义组件，使其看起来像这样（“个人资料”带有按钮图标的黑条）：

然后我可以通过按用户图标导航到EditAccounts。但是，当我从EditAccounts导航回到个人资料时，页面将显示为navigationOptions标头，如下所示：

我该如何正确地应用它，这样我就可以简单地靠在navigationOptions标头上并将自定义名称添加到该名称上（在这种情况下，请删除我的自定义组件）？

Answer 1

有2种情况。

如果您要在访问QR或EditAccount时保留标签页

const BottomTabNavigator = createBottomTabNavigator({
  ...
  Profile: {
   screen: ProfileNavigator,
  }
})

const ProfileNavigator = createStackNavigator({
  Profile: { screen: Profile},
  QR: { screen: GenerateQR, navigationOptions },
  EditAccount: { screen: EditAccount, navigationOptions }
});

ProfileNavigator.navigationOptions = () => {
  const navigationOptions = {
    header: null,
    headerMode: 'none',
  };
  return navigationOptions;
};

const AppContainer = createAppContainer(BottomTabNavigator);

如果您不想保留标签

const BottomTabNavigator = createBottomTabNavigator({
  ...
  Profile: {
   screen: Profile,
  }
})

const AppNavigator = createStackNavigator({
  Tabs: BottomTabNavigator,
  QR: { screen: GenerateQR, navigationOptions },
  EditAccount: { screen: EditAccount, navigationOptions }
})

const AppContainer = createAppContainer(AppNavigator);

已更新：

将navigationOptions添加到ProfileNavigator中以删除标题

ProfileNavigator.navigationOptions = () => {
  const navigationOptions = {
    header: null,
    headerMode: 'none',
  };
  return navigationOptions;
};

如何在应用容器中正确堆叠嵌套的导航器？

1 个答案:

已更新：