feat: react-native-vector-icons

App.tsx

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

src/router/StackNavigation.js

@@ -2,7 +2,7 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-25 14:42:30
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-25 17:18:22
+ * @LastEditTime: 2021-01-27 13:56:19
  * @FilePath: \src\router\StackNavigation.js
  */
 
@@ -12,6 +12,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 
 import Home from '../views/Home';
 import Details from '../views/Details';
+import IconPage from '../views/IconPage';
 const Stack = createStackNavigator();
 
 function StackNavigation() {
@@ -24,6 +25,7 @@ function StackNavigation() {
           component={Home}
         />
         <Stack.Screen name="Details" component={Details} />
+        <Stack.Screen name="IconPage" component={IconPage} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/router/index.js

@@ -2,6 +2,14 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-25 14:42:04
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-25 14:42:05
+ * @LastEditTime: 2021-01-27 14:05:17
  * @FilePath: \src\router\index.js
  */
+import React from 'react';
+import StackNavigation from './StackNavigation';
+import TabsNavigation from './TabsNavigation';
+import DrawerNavigation from './DrawerNavigation';
+
+export default function () {
+  return <StackNavigation />;
+}

src/views/Home.js

@@ -2,8 +2,8 @@
  * @Author: zhuchuanyong
  * @Date: 2021-01-25 14:44:12
  * @LastEditors: zhuchuanyong
- * @LastEditTime: 2021-01-25 17:45:19
- * @FilePath: \src\views\home.js
+ * @LastEditTime: 2021-01-27 14:07:30
+ * @FilePath: \src\views\Home.js
  */
 import {Button} from '@ant-design/react-native';
 import React from 'react';
@@ -22,6 +22,10 @@ const Home = (props) => {
       <Button type="primary" onPress={() => gotoDetail()}>
         Home
       </Button>
+
+      <Button type="primary" onPress={() => navigation.navigate('IconPage')}>
+        Icon
+      </Button>
     </>
   );
 };

src/views/IconPage.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-27 13:51:34
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-27 14:55:07
+ * @FilePath: \src\views\iconpage.js
+ */
+import React from 'react';
+import {View, Text} from 'react-native';
+import {Card, WhiteSpace, WingBlank, Flex} from '@ant-design/react-native';
+import AntIcon from 'react-native-vector-icons/AntDesign';
+import Icon from 'react-native-vector-icons/FontAwesome';
+const IconPage = () => {
+  return (
+    <View>
+      <Card>
+        <Card.Header
+          title="Antd 图标"
+          thumbStyle={{width: 30, height: 30}}
+          extra="福报"
+        />
+        <Card.Body>
+          <Flex justify="around">
+            <AntIcon name="dingding" size={30} color="#1c7ed6" />
+            <AntIcon name="github" size={30} color="#1c7ed6" />
+            <AntIcon name="chrome" size={30} color="#1c7ed6" />
+          </Flex>
+        </Card.Body>
+        <Card.Footer
+          content="阿里里，阿里里，阿里阿里里"
+          extra="<<老司机带带我>>"
+        />
+      </Card>
+
+      <Card>
+        <Card.Header
+          title="FontAwesome 图标"
+          thumbStyle={{width: 30, height: 30}}
+        />
+        <Card.Body>
+          <Flex justify="around">
+            <Icon name="asl-interpreting" size={30} color="#63e6be" />
+            <Icon name="rmb" size={30} color="#63e6be" />
+            <Icon name="tripadvisor" size={30} color="#63e6be" />
+
+            <Icon name="sign-language" size={30} color="#63e6be" />
+          </Flex>
+        </Card.Body>
+        <Card.Footer
+          content="阿里里，阿里里，阿里阿里里"
+          extra="<<老司机带带我>>"
+        />
+      </Card>
+    </View>
+  );
+};
+
+export default IconPage;