ReactNative：如何在抽屉式导航器中更改选项卡导航器的标题

Question

我正在构建一个具有登录和配置文件屏幕的react native应用程序。导航如下：我想在导航到每个选项卡时更改标题标题。此外，我希望我的抽屉能够从任何屏幕打开。抽屉图标应始终位于左侧的配置文件中。 我无法在配置文件屏幕中将标题设置为“无/隐藏”，因为它也会隐藏抽屉图标。任何想法如何解决？

const TabStack = TabNavigator(
  {
    Home: {
      screen: Home
    },
    Settings: {
      screen: SettingsTab
    }
  }
);

const DrawerMain = DrawerNavigator(
  {
    TabStack: {
      screen: TabStack
    }
  },
  {
    drawerOpenRoute: "DrawerOpen",
    drawerCloseRoute: "DrawerClose"
);
const Profile = StackNavigator(
  {
    DrawerMain: {
      screen: DrawerMain   
  }
},
{
    headerMode: "screen",
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
        backgroundColor: "white"
      },
      headerLeft: (
        <TouchableOpacity
          onPress={() => {
            if (navigation.state.index === 0) {
              navigation.navigate("DrawerOpen");
            } else {
              navigation.navigate("DrawerClose");
            }
          }}
        >
          <Icon name={"ios-menu"} size={20} style={{ color: "red" }} />
        </TouchableOpacity>
      )
    })
  }
);
export default (App = StackNavigator({
  Login: {
    screen: Login
  },
  Profile: {
    screen: Profile,
  }
}));

这是配置文件的外观。

Answer 1

首先，将导航层次结构更改为这样。

抽屉

ㄴ堆叠

__ㄴ标签

然后，您需要将DrawerNavigator的导航传递给StackNavigator，以通过StackNavigator中的按钮控制抽屉。

并通过screenProps使用它。

...

const Profile = StackNavigator(
  {
    TabStack: {
      screen: TabStack   
  }
},
navigationOptions: ({ screenProps }) => ({
      ...
      headerLeft: (
        <TouchableOpacity
          onPress={() => {
              screenProps.myDrawerNavigation.navigate("DrawerOpen");
          }}
        >
          <Icon name={"ios-menu"} size={20} style={{ color: "red" }} />
        </TouchableOpacity>
      )
...


const DrawerMain = DrawerNavigator(
  {
    Profile: {
      screen: ({navigation}) => <Profile screenProps={{myDrawerNavigation:navigation}}/>
    }
  },
  ...