feat: tab navigation

App.tsx

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

package.json

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

src/router/TabsNavigation.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-26 10:17:27
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-26 11:36:54
+ * @FilePath: \src\router\TabsNavigation.js
+ */
+
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+// import Ionicons from 'react-native-vector-icons/Ionicons';
+import Home from '../views/Home';
+import Details from '../views/Details';
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        tabBarOptions={{
+          activeTintColor: 'tomato',
+          inactiveTintColor: 'gray',
+        }}>
+        <Tab.Screen
+          options={{title: '首页', iconName: 'ios-information-circle'}}
+          name="Home"
+          component={Home}
+        />
+        <Tab.Screen name="Details" component={Details} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

yarn.lock

@@ -1182,6 +1182,14 @@
   resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.9.10.tgz#c0d445453e91077cc85a3f0a6d0074d44d21e438"
   integrity sha512-g0C0RLjXXGE4UfmGxNtAOY3LE5Epz8+ck/rB1oErJowskIIG83U6LVqH9oFrx1Hq1k/lbVQGgabURlE0QQ1MHA==
 
+"@react-navigation/bottom-tabs@^5.11.7":
+  version "5.11.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.7.tgz#a1d220afe02b6897c0705ddc40265e65c01fa0ba"
+  integrity sha512-O8B/5GiME589fc6ltqV3iJxCdWXhplx+9i7tPbwx4SxKm1e1N9jdL9H8bsx+SWcMBelGfGeZ2WqRwMJzjQDT3Q==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-navigation/core@^5.15.1":
   version "5.15.1"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.1.tgz#dab5192277c606d9acbea511dac407c2834b5fbe"