refactor: add RNDeviceInfo

Phecda
Commit 709c766f7b4116907aa4a30e76f21884b61d0288 709c766f 1 parent 8b3d838e
Showing 7 changed files with 88 additions and 5 deletions
ios/Podfile.lock
package.json
src/screen/AppNavigationContainer.tsx
src/screen/RNDeviceInfo.tsx
src/screen/SystemInfo.tsx
src/type/Navigation.ts
yarn.lock
--- a/ios/Podfile.lock
View file @709c766
+++ b/ios/Podfile.lock
View file @709c766
@@ -298,6 +298,8 @@ PODS:
     - React
   - RNCMaskedView (0.1.7):
     - React
+  - RNDeviceInfo (5.5.4):
+    - React
   - RNGestureHandler (1.6.1):
     - React
   - RNReanimated (1.7.1):
@@ -346,6 +348,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -422,6 +425,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-dark-mode"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -472,6 +477,7 @@ SPEC CHECKSUMS:
   ReactCommon: 3585806280c51d5c2c0d3aa5a99014c3badb629d
   ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
   RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
+  RNDeviceInfo: 6a3d16fce033f6979c4a6a41e62244d183e8c765
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
   RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
--- a/package.json
View file @709c766
+++ b/package.json
View file @709c766
@@ -20,6 +20,7 @@
     "react": "16.11.0",
     "react-native": "0.62.1",
     "react-native-dark-mode": "^0.2.2",
+    "react-native-device-info": "^5.5.4",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.7.1",
--- a/src/screen/AppNavigationContainer.tsx
View file @709c766
+++ b/src/screen/AppNavigationContainer.tsx
View file @709c766
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
 import Fontisto from 'react-native-vector-icons/Fontisto';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { MainTabParamList } from '../type/Navigation';
+import { MainTabParamList, MainStackParamList } from '../type/Navigation';
 import WelcomePage from './WelcomePage';
 import SystemInfo from './SystemInfo';
 import DesignList from './DesignList';
 import { useDynamicValue } from 'react-native-dark-mode';
 import { colorPreset } from '../design';
+import RNDeviceInfoList from './RNDeviceInfo';
 const MainTab = createBottomTabNavigator<MainTabParamList>();
-export default () => {
+const Home = () => {
   const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
   const tintColor = useDynamicValue(colorPreset.linkColor);
   const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
   return (
-    <NavigationContainer>
     <MainTab.Navigator
       screenOptions={({ route }) => {
         const routeName = route.name;
@@ -64,6 +65,21 @@ export default () => {
       <MainTab.Screen name="SystemInfo" component={SystemInfo} />
       <MainTab.Screen name="DesignList" component={DesignList} />
     </MainTab.Navigator>
+  );
+};
+
+const MainStack = createStackNavigator<MainStackParamList>();
+
+export default () => {
+  return (
+    <NavigationContainer>
+      <MainStack.Navigator>
+        <MainStack.Screen name="MainTab" component={Home} />
+        <MainStack.Screen
+          name="RNDeviceInfoList"
+          component={RNDeviceInfoList}
+        />
+      </MainStack.Navigator>
     </NavigationContainer>
   );
 };
--- a/src/screen/RNDeviceInfo.tsx 0 → 100644
View file @709c766
+++ b/src/screen/RNDeviceInfo.tsx 0 → 100644
View file @709c766
+import React, { useState, useCallback, useEffect } from 'react';
+import { StackNavigationProp } from '@react-navigation/stack';
+import DeviceInfo from 'react-native-device-info';
+import { ListItem, BGScroll, Card, Divider, BGList } from '../component/View';
+import { MainStackParamList } from '../type/Navigation';
+
+type NavigationProp = StackNavigationProp<
+  MainStackParamList,
+  'RNDeviceInfoList'
+>;
+
+type DeviceInfoMethod = keyof typeof DeviceInfo;
+
+const keys = Object.keys(DeviceInfo).filter(
+  (k) => !k.startsWith('use') && !/Sync/.test(k)
+) as Array<DeviceInfoMethod>;
+
+const DeviceInfoItem = ({ k }: { k: DeviceInfoMethod }) => {
+  const [v, setV] = useState('');
+  const onEval = useCallback(async () => {
+    const method = DeviceInfo[k];
+    let result = '';
+    try {
+      const r = await method('');
+      result = typeof r === 'object' ? JSON.stringify(r) : String(r);
+    } catch (error) {
+      result = `err: ${error}`;
+    }
+    setV(result);
+  }, [k]);
+  useEffect(() => {
+    onEval();
+  }, [onEval]);
+  return <ListItem title={k} subtitle={v} onPress={onEval} />;
+};
+
+const RNDeviceInfoList = ({ navigation }: { navigation: NavigationProp }) => {
+  return (
+    <BGList
+      data={keys}
+      renderItem={({ item }) => {
+        return <DeviceInfoItem k={item} />;
+      }}
+    />
+  );
+};
+
+export default RNDeviceInfoList;
--- a/src/screen/SystemInfo.tsx
View file @709c766
+++ b/src/screen/SystemInfo.tsx
View file @709c766
@@ -9,13 +9,15 @@ export default () => {
       <Card shadow>
         <ListItem
           title={'width'}
-          rightTitle={`${width}pt`}
+          rightTitle={`${Number.isInteger(width) ? width : width.toFixed(2)}pt`}
           rightSubtitle={`${width * scale}px`}
         />
         <Divider />
         <ListItem
           title={'height'}
-          rightTitle={`${height}pt`}
+          rightTitle={`${
+            Number.isInteger(height) ? height : height.toFixed(2)
+          }pt`}
           rightSubtitle={`${height * scale}px`}
         />
         <Divider />
--- a/src/type/Navigation.ts
View file @709c766
+++ b/src/type/Navigation.ts
View file @709c766
@@ -3,3 +3,8 @@ export type MainTabParamList = {
   SystemInfo: undefined;
   DesignList: undefined;
 };
+
+export type MainStackParamList = {
+  MainTab: undefined;
+  RNDeviceInfoList: undefined;
+};
--- a/yarn.lock
View file @709c766
+++ b/yarn.lock
View file @709c766
@@ -6596,6 +6596,11 @@ react-native-dark-mode@^0.2.2:
     events "^3.0.0"
     toolkit.ts "^0.0.2"
+react-native-device-info@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.npm.taobao.org/react-native-device-info/download/react-native-device-info-5.5.4.tgz#470770db4e8a35c55b8269473d81790102074057"
+  integrity sha1-Rwdw206KNcVbgmlHPYF5AQIHQFc=
+
 react-native-elements@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npm.taobao.org/react-native-elements/download/react-native-elements-1.2.7.tgz#1eca2db715c41722aeb67aea62bd2a4621adb134"