React Native 向左滑动以打开类似 Instagram 的页面

Question

我有一个带有底部标签视图的本机应用程序。我想在第一页向左滑动并打开我拥有的聊天页面时添加该功能。

我尝试了react-native-gesture-handler，但它没有为我提供我想要的功能。我觉得它更适合滑动列表项

我基本上是想向左滑动打开我已有的聊天页面

有人对如何做到这一点有任何建议吗？

Answer 1

如您所说，我们可以使用 react-navigation 库来创建选项卡导航器。

查看官方文档了解更多信息。

React Navigation Material Top Tabs

React Navigation Bottom Tabs

查看以下示例代码。

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

import ChatScreen from '../screens/ChatScreen';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
import NotificationScreen from '../screens/NotificationScreen';
import ProfileScreen from '../screens/ProfileScreen';

const TopTab = createMaterialTopTabNavigator();
const Tab = createBottomTabNavigator();

const BottomTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Notification" component={NotificationScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

const MainNavigation = () => {
  return (
    <TopTab.Navigator tabBar={() => null}>
      <TopTab.Screen name="Tabs" component={BottomTab} />
      <TopTab.Screen name="Chat" component={ChatScreen} />
    </TopTab.Navigator>
  );
};

export default MainNavigation;