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

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

This is how the profile should look like.

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}}/>
    }
  },
  ...