Question

我正在编写类似于Instagram的react native应用。我已经有一个包含5个项目的底部标签导航器，最后一个是配置文件标签。

在此配置文件选项卡中，我希望抽屉式导航器管理配置文件设置，我希望此抽屉在此选项卡中仅是“可绘制的”，而不是其他选项卡。但是我也希望抽屉同时显示在标签导航器的顶部（就像instagram一样）。

我正在为此使用react-navigation库。我的问题是：这可能吗？如果是，我该如何在我的代码中实现它？

谢谢

Answer 1

您将不得不在选项卡导航器中嵌套一个抽屉式导航器。

“个人资料”标签应包含一个抽屉式导航器，并应包含您的实际个人资料屏幕。

如果要自定义抽屉到通知页面，则应在此处提供自定义视图。

高级结构如下

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function AppDraw() {
  return (
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={AppDraw} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

您可以参考this自定义抽屉。希望对您有所帮助。

抽屉导航在选项卡导航内，但在顶部（本机响应）

1 个答案: