feat: add dep page & jsontree component

Author: zhiqingchen

package.json

@@ -40,7 +40,6 @@
   ],
   "author": "",
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
     "@react-native-async-storage/async-storage": "^1.13.2",
     "@react-native-community/cameraroll": "^4.0.1",
     "@react-native-community/clipboard": "^1.5.1",
@@ -69,6 +68,7 @@
     "react-native": "^0.64.0",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-image-resizer": "^1.4.0",
+    "react-native-json-tree": "^1.3.0",
     "react-native-pager-view": "^5.4.0",
     "react-native-reanimated": "^1.13.1",
     "react-native-safe-area-context": "^3.1.8",
@@ -80,6 +80,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
+    "@babel/runtime": "^7.7.7",
     "@tarojs/cli": "3.3.3",
     "@tarojs/mini-runner": "3.3.3",
     "@tarojs/rn-runner": "3.3.3",

src/app.config.ts

@@ -66,6 +66,7 @@ export default {
     'pages/apis/pages/device/vibrate/index',
     // api 相关 end
     'pages/about/index',
+    'pages/about/dep',
     'pages/webview/index',
   ],
   window: {

src/pages/about/dep.config.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: zhiqingchen
+ * @Date: 2021-07-19 15:54:39
+ * @LastEditors: zhiqingchen
+ * @LastEditTime: 2021-07-28 18:29:49
+ * @FilePath: /taro-react-native/src/pages/dep/index.config.ts
+ */
+export default {
+  navigationBarTitleText: '依赖列表',
+}

src/pages/about/dep.scss

@@ -0,0 +1,5 @@
+@import '../../styles/variables.scss';
+
+.page {
+    padding: 40px 32px;
+}

src/pages/about/dep.tsx

@@ -0,0 +1,18 @@
+import { Component } from 'react'
+import { View } from '@tarojs/components';
+import { dependencies, devDependencies } from '../../../package.json';
+import Header from '../components/head/head'
+import JSONTree from '../components/jsontree'
+
+import './dep.scss';
+
+export default class Index extends Component<any, any> {
+  render() {
+    return <View className="page">
+      <Header title='dependencies'></Header>
+      <JSONTree data={dependencies} />
+      <Header title='devDependencies'></Header>
+      <JSONTree data={devDependencies} />
+    </View>
+  }
+}

src/pages/about/index.scss

@@ -50,7 +50,8 @@
     margin-top: 40px;
     align-items: center;
     &-text {
+        padding: 20px;
         font-size: $font-size-sm;
         color: $color-grey-2;
     }
-}
+}

src/pages/about/index.tsx

@@ -8,6 +8,8 @@
 import { Component, Fragment } from 'react'
 import Taro from '@tarojs/taro';
 import { View, Image, Text } from '@tarojs/components';
+import { version as taroVersion } from '@tarojs/taro/package.json';
+import { version as rnVersion } from 'react-native/package.json';
 import './index.scss';
 
 export default class Index extends Component<any, any> {
@@ -97,9 +99,14 @@ export default class Index extends Component<any, any> {
             )
           })}
         </View>
-        {/* <View className='page-footer'>
-          <Text className='page-footer-text'>Copyright(c) XXXXXXXXXXXXXXXXXXXXXX</Text>
-        </View> */}
+        <View className='page-footer' onClick={() => {
+          Taro.navigateTo({
+            url: '/pages/about/dep'
+          })
+        }}
+        >
+          <Text className='page-footer-text'>Taro: {taroVersion} React Native: {rnVersion}</Text>
+        </View>
       </View>
     )
   }

src/pages/apis/pages/basic/system/index.tsx

@@ -8,6 +8,7 @@
 import { Component } from 'react'
 import Taro from '@tarojs/taro'
 import { View, Button } from '@tarojs/components'
+import JSONTree from '../../../../components/jsontree'
 import './index.scss'
 
 export default class Index extends Component<any, any> {
@@ -63,15 +64,8 @@ export default class Index extends Component<any, any> {
         >
           clear
         </Button>
-        <View style={{padding: 20}}>
-          {Object.keys(info).map(key => {
-            const value = info[key];
-            return (
-              <View key={key}>{`${key}: ${value}`}</View>
-            )
-          })}
-        </View>
+        <JSONTree data={info} />
       </View>
     )
   }
-}
+}

src/pages/apis/pages/device/accelerometer/index.tsx

@@ -7,17 +7,23 @@
  */
 import Taro from "@tarojs/taro-rn";
 import { Button, View } from "@tarojs/components";
+import { useState } from "react";
+import JSONTree from '../../../../components/jsontree';
 
 import "./index.scss";
 
 const Index = () => {
+  const [accelerometer1, setAccelerometer1] = useState({});
+  const [accelerometer2, setAccelerometer2] = useState({});
 
-  const _handleCallback1 = (...res) => {
+  const _handleCallback1 = (res) => {
     console.log("回调函数 C1", res);
+    setAccelerometer1(res);
   }
 
-  const _handleCallback2 = (...res) => {
+  const _handleCallback2 = (res) => {
     console.log("回调函数 C2", res);
+    setAccelerometer2(res);
   }
 
   return (
@@ -32,6 +38,7 @@ const Index = () => {
         >
           Taro.onAccelerometerChange(C1)
         </Button>
+        <JSONTree data={accelerometer1} />
         <Button
           type="primary"
           className="api-page-btn-success"
@@ -41,6 +48,7 @@ const Index = () => {
         >
           Taro.onAccelerometerChange(C2)
         </Button>
+        <JSONTree data={accelerometer2} />
         <Button
           type="primary"
           className="api-page-btn-warning"

src/pages/apis/pages/device/deviceMotion/index.tsx

@@ -7,17 +7,23 @@
  */
 import Taro from "@tarojs/taro-rn";
 import { Button, View } from "@tarojs/components";
+import { useState } from "react";
+import JSONTree from '../../../../components/jsontree';
 
 import "./index.scss";
 
 const Index = () => {
+  const [deviceMotion1, setDeviceMotion1] = useState({});
+  const [deviceMotion2, setDeviceMotion2] = useState({});
 
-  const _handleCallback1 = (...res) => {
+  const _handleCallback1 = (res) => {
     console.log("回调函数 C1", res);
+    setDeviceMotion1(res);
   }
 
-  const _handleCallback2 = (...res) => {
+  const _handleCallback2 = (res) => {
     console.log("回调函数 C2", res);
+    setDeviceMotion2(res);
   }
 
   return (
@@ -32,6 +38,7 @@ const Index = () => {
         >
           Taro.onDeviceMotionChange(C1)
         </Button>
+        <JSONTree data={deviceMotion1} />
         <Button
           type="primary"
           className="api-page-btn-success"
@@ -41,6 +48,7 @@ const Index = () => {
         >
           Taro.onDeviceMotionChange(C2)
         </Button>
+        <JSONTree data={deviceMotion2} />
         <Button
           type="primary"
           className="api-page-btn-warning"

src/pages/apis/pages/device/gyroscope/index.tsx

@@ -7,17 +7,23 @@
  */
 import Taro from "@tarojs/taro-rn";
 import { Button, View } from "@tarojs/components";
+import { useState } from "react";
+import JSONTree from '../../../../components/jsontree';
 
 import "./index.scss";
 
 const Index = () => {
+  const [gyroscope1, setGyroscope1] = useState({});
+  const [gyroscope2, setGyroscope2] = useState({});
 
-  const _handleCallback1 = (...res) => {
+  const _handleCallback1 = (res) => {
     console.log("回调函数 C1", res);
+    setGyroscope1(res);
   }
 
-  const _handleCallback2 = (...res) => {
+  const _handleCallback2 = (res) => {
     console.log("回调函数 C2", res);
+    setGyroscope2(res);
   }
 
   return (
@@ -32,6 +38,7 @@ const Index = () => {
         >
           Taro.onGyroscopeChange(C1)
         </Button>
+        <JSONTree data={gyroscope1} />
         <Button
           type="primary"
           className="api-page-btn-success"
@@ -41,6 +48,7 @@ const Index = () => {
         >
           Taro.onGyroscopeChange(C2)
         </Button>
+        <JSONTree data={gyroscope2} />
         <Button
           type="primary"
           className="api-page-btn-warning"

src/pages/apis/pages/device/scanCode/index.tsx

@@ -7,15 +7,14 @@
  */
 import { useState } from "react";
 import Taro from "@tarojs/taro-rn";
-import { Button, View, Text } from "@tarojs/components";
+import { Button, View } from "@tarojs/components";
+import JSONTree from '../../../../components/jsontree';
 
 import "./index.scss";
 
 const Index = () => {
   const [info, setInfo] = useState({});
 
-  const infoKeys = Object.keys(info);
-
   return (
     <View className="api-page">
       <View className="api-page__body">
@@ -38,17 +37,7 @@ const Index = () => {
         >
           Taro.scanCode
         </Button>
-        {infoKeys.length > 0 && (
-          <View className='common-border'>
-            {infoKeys.map(key => {
-              return (
-                <View key={key}>
-                  <Text>{key}: {info[key]}</Text>
-                </View>
-              )
-            })}
-          </View>
-        )}
+        <JSONTree data={info} />
       </View>
     </View>
   )

src/pages/apis/pages/location/index/index.tsx

@@ -6,18 +6,25 @@
  * @FilePath: /taro-react-native/src/pages/apis/pages/location/index/index.tsx
  */
 import Taro from '@tarojs/taro';
-import { View, Button, Text } from '@tarojs/components';
+import { useState } from "react";
+import { View, Button } from '@tarojs/components';
+import JSONTree from '../../../../components/jsontree';
 
 import './index.scss'
 
 const PageView = () => {
+  const [location, setLocation] = useState({});
+  const [location1, setLocation1] = useState({});
+  const [location2, setLocation2] = useState({});
 
   const _handleCallback1 = (res) => {
     console.log("回调函数 C1", res);
+    setLocation1(res)
   }
 
   const _handleCallback2 = (res) => {
     console.log("回调函数 C2", res);
+    setLocation2(res)
   }
 
   return (
@@ -29,25 +36,28 @@ const PageView = () => {
           onClick={() => {
             Taro.getLocation({
               success: res => {
-                console.log(999, res)
+                setLocation(res)
               }
             })
           }}
         >Taro.getLocation</Button>
+        <JSONTree data={location} />
         <Button
           type="primary"
           className="api-page-btn-success"
           onClick={() => {
             Taro.onLocationChange(_handleCallback1)
           }}
         >Taro.onLocationChange(C1)</Button>
+        <JSONTree data={location1} />
         <Button
           type="primary"
           className="api-page-btn-success"
           onClick={() => {
             Taro.onLocationChange(_handleCallback2)
           }}
         >Taro.onLocationChange(C2)</Button>
+        <JSONTree data={location2} />
         <Button
           type="primary"
           className="api-page-btn-warning"

src/pages/components/jsontree/index.tsx

@@ -0,0 +1,27 @@
+import JSONTree from 'react-native-json-tree'
+import { View } from '@tarojs/components'
+
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+export default (props) => {
+  return (Object.keys(props.data).length > 0 ? <JSONTree {...props} theme={theme} hideRoot /> : <View></View>)
+}