ReactNative：如何在抽屉导航器中更改选项卡导航器的 Headers-Java 学习之路

我正在使用登录和配置文件屏幕构建一个react本机应用程序 . 导航如下：我想在导航到每个选项卡时更改 Headers Headers . 此外，我希望我的抽屉能够从任何屏幕打开 . 所以抽屉图标应始终位于左侧的配置文件中 . 我不能使 Headers 无/隐藏在配置文件屏幕中，因为它将隐藏抽屉图标 . 任何想法如何解决它？

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.

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

回复于 2024-05-02T17:14:34+08:00

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

1 回答

相关问题