feat: tab navigation

App.tsx

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-22 15:13:57
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-26 10:29:46
+ * @LastEditTime: 2021-01-27 11:25:08
  * @FilePath: \App.tsx
  */
 /**
@@ -15,16 +15,18 @@
  * @format
  */
 import React from 'react';
-import StackNavigation from './src/router/StackNavigation';
-import TabsNavigation from './src/router/TabsNavigation';
+// import StackNavigation from './src/router/StackNavigation';
+// import TabsNavigation from './src/router/TabsNavigation';
+import DrawerNavigation from './src/router/DrawerNavigation';
 
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
   return (
     <>
-      <TabsNavigation />
+      {/* <TabsNavigation /> */}
       {/* <StackNavigation /> */}
+      <DrawerNavigation />
     </>
   );
 };

package.json

@@ -19,6 +19,7 @@
     "@react-native-community/viewpager": "^4.2.2",
     "@react-native-picker/picker": "^1.9.10",
     "@react-navigation/bottom-tabs": "^5.11.7",
+    "@react-navigation/drawer": "^5.12.3",
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.1",
     "react": "16.13.1",

src/router/DrawerNavigation.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-27 11:19:42
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-27 11:37:35
+ * @FilePath: \src\router\DrawerNavigation.js
+ */
+
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+import DrawerPage from '../views/Drawer';
+const Drawer = createDrawerNavigator();
+
+export default function TabNavigation() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator initialRouteName="Home">
+        <Drawer.Screen
+          name="Home"
+          options={{title: '123'}}
+          component={DrawerPage}
+        />
+        {/* <Drawer.Screen name="Notifications" component={Details} /> */}
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}

src/router/TabsNavigation.js

@@ -2,10 +2,9 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-26 10:17:27
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-27 11:07:54
+ * @LastEditTime: 2021-01-27 11:24:03
  * @FilePath: \src\router\TabsNavigation.js
  */
-
 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

src/views/Drawer.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-25 14:44:12
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-27 11:30:03
+ * @FilePath: \src\views\Drawer.js
+ */
+import {Button} from '@ant-design/react-native';
+import React from 'react';
+
+const Home = (props) => {
+  let {navigation} = props;
+  const openDrawer = () => {
+    navigation.openDrawer();
+  };
+  return (
+    <>
+      <Button type="primary" onPress={() => openDrawer()}>
+        Drawer
+      </Button>
+    </>
+  );
+};
+
+export default Home;

yarn.lock

@@ -1201,6 +1201,14 @@
     query-string "^6.13.6"
     react-is "^16.13.0"
 
+"@react-navigation/drawer@^5.12.3":
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.12.3.tgz#f2c365ae8a35c386ff16c7bc2bc5671b5784a6dd"
+  integrity sha512-I0aR/ULjFZcGick0u724YWxR0shTNhqctXdQnP7YFbOWML645EBS1LCtKgStfd9qd3sojHRSHIc7fReYa8bHfA==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-navigation/native@^5.9.2":
   version "5.9.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.2.tgz#2075774c3627d58a324e1b5dfc5f4f356a1ab7e9"