Question

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

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

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

抽屉

ㄴStack

__ㄴ标签

然后，您需要将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：如何在抽屉导航器中更改选项卡导航器的标题

1 个答案: