refactor: move third-party modules out from SystemInfo to Library

@@ -21,6 +21,7 @@ import { Platform } from 'react-native';
 import RNLocalize from './RNLocalize';
 import { useI18nStrings } from '../i18n';
 import CameraScreen from './CameraScreen';
+import Library from './Library';
 
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 
@@ -64,6 +65,14 @@ const Home = () => {
                     name={'ios-color-palette'}
                   />
                 );
+              case 'Library':
+                return (
+                  <Ionicons
+                    size={size}
+                    color={color}
+                    name={focused ? 'ios-list-box' : 'ios-list'}
+                  />
+                );
               default:
                 break;
             }
@@ -71,6 +80,7 @@ const Home = () => {
         };
       }}
     >
+      <MainTab.Screen name="Library" component={Library} />
       <MainTab.Screen name="SystemInfo" component={SystemInfo} />
       <MainTab.Screen name="DesignList" component={DesignList} />
     </MainTab.Navigator>

+import React from 'react';
+import { BGList, BGScroll, ListItem, Divider } from '../component/View';
+import { MainTabScreenProps } from '../type/Navigation';
+import { useI18nStrings } from '../i18n';
+
+const Library = ({ navigation }: MainTabScreenProps<'Library'>) => {
+  const strings = useI18nStrings();
+  return (
+    <BGScroll>
+      <ListItem
+        title="RNDeviceInfo"
+        onPress={() => navigation.navigate('RNDeviceInfoList')}
+        chevron
+      />
+      <Divider />
+      <ListItem
+        title={'RNCWebview'}
+        onPress={() =>
+          navigation.navigate('WebviewScreen', {
+            uri: 'https://www.baidu.com',
+          })
+        }
+        chevron
+      />
+      <Divider />
+      <ListItem
+        title={'RNLocalize'}
+        onPress={() => navigation.navigate('RNLocalize')}
+        rightTitle={strings.name}
+        chevron
+      />
+      <Divider />
+      <ListItem
+        title={'RNCamera'}
+        onPress={() => navigation.navigate('RNCamera')}
+        chevron
+      />
+    </BGScroll>
+  );
+};
+
+export default Library;

@@ -4,7 +4,6 @@ import { screensEnabled } from 'react-native-screens';
 import { useNetInfo } from '@react-native-community/netinfo';
 import { ListItem, BGScroll, Card, Divider } from '../component/View';
 import { MainTabScreenProps } from '../type/Navigation';
-import { useI18nStrings } from '../i18n';
 
 declare var global: { HermesInternal: null | {} };
 
@@ -12,7 +11,6 @@ const SystemInfo = ({
   navigation,
   route,
 }: MainTabScreenProps<'SystemInfo'>) => {
-  const strings = useI18nStrings();
   const netInfo = useNetInfo();
   const { width, height, fontScale, scale } = useWindowDimensions();
   return (
@@ -61,36 +59,6 @@ const SystemInfo = ({
           rightTitle={JSON.stringify(netInfo.details)}
         />
       </Card>
-      <Card shadow>
-        <ListItem
-          title="RNDeviceInfo"
-          onPress={() => navigation.navigate('RNDeviceInfoList')}
-          chevron
-        />
-        <Divider />
-        <ListItem
-          title={'RNCWebview'}
-          onPress={() =>
-            navigation.navigate('WebviewScreen', {
-              uri: 'https://www.baidu.com',
-            })
-          }
-          chevron
-        />
-        <Divider />
-        <ListItem
-          title={'RNLocalize'}
-          onPress={() => navigation.navigate('RNLocalize')}
-          rightTitle={strings.name}
-          chevron
-        />
-        <Divider />
-        <ListItem
-          title={'Camera'}
-          onPress={() => navigation.navigate('RNCamera')}
-          chevron
-        />
-      </Card>
     </BGScroll>
   );
 };

@@ -3,6 +3,7 @@ import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 export type MainTabParamList = {
+  Library: undefined;
   SystemInfo: undefined;
   DesignList: undefined;
 };