ReactNative:How 为抽屉导航器内的选项卡导航器更改 header

Question

我正在构建一个带有登录名和配置文件的 React 本机应用程序 screen.The 导航如下：我想在导航到每个 tabs.Also 时更改 header 标题，我希望我的抽屉能够从任何 screen.So 打开抽屉图标应该始终在左侧的配置文件中。我无法在配置文件屏幕中设置 header none/hide，因为它会隐藏抽屉图标 well.Any 想知道如何解决它？

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

ReactNative:How 为抽屉导航器内的选项卡导航器更改 header

ReactNative:How to change the header for tab navigator inside a drawer navigator

reactjs

react-native

react-navigation