如何解决React Native 向左滑动打开 Instagram 等页面
我有一个带有底部选项卡视图的 React Native 应用程序。我想在第一页中添加该功能,我想向左滑动并打开我拥有的聊天页面。
我尝试了 react-native-gesture-handler
,但它没有提供我想要的功能。我觉得它更适合列表项滑动
我基本上想向左滑动打开我已有的聊天页面
有人对如何做到这一点有任何建议吗?
解决方法
我们可以使用 react-navigation 库来创建您所说的标签导航器。
查看官方文档了解更多信息。
React Navigation Material Top 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。