refactor: init plugin and inject script

client/mobile/package.json

@@ -7,11 +7,13 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
+    "plugins:all": "ministar buildPlugin all",
     "test": "jest"
   },
   "dependencies": {
     "@notifee/react-native": "^7.4.0",
     "immer": "^9.0.19",
+    "mini-star": "^2.0.8",
     "react": "18.2.0",
     "react-native": "0.71.2",
     "react-native-gesture-handler": "^2.9.0",

client/mobile/plugins/com.msgbyte.env.rn/manifest.json

@@ -0,0 +1,9 @@
+{
+  "label": "ReactNative支持",
+  "name": "com.msgbyte.env.rn",
+  "url": "/plugins/com.msgbyte.env.rn/index.js",
+  "version": "0.0.0",
+  "author": "moonrailgun",
+  "description": "在Tailchat添加对ReactNative环境的支持",
+  "requireRestart": true
+}

client/mobile/plugins/com.msgbyte.env.rn/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@plugins/com.msgbyte.env.rn",
+  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "description": "在Tailchat添加对ReactNative环境的支持",
+  "private": true,
+  "scripts": {
+    "sync:declaration": "tailchat declaration github"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "react": "18.2.0",
+    "styled-components": "^5.3.6"
+  }
+}

client/mobile/plugins/com.msgbyte.env.rn/src/index.tsx

@@ -0,0 +1,3 @@
+const PLUGIN_NAME = 'ReactNative支持';
+
+console.log(`Plugin ${PLUGIN_NAME} is loaded`);

client/mobile/plugins/com.msgbyte.env.rn/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  }
+}

client/mobile/plugins/com.msgbyte.env.rn/types/tailchat.d.ts

@@ -0,0 +1,2 @@
+declare module '@capital/common';
+declare module '@capital/component';

client/mobile/src/AppMain.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { generateInjectScript } from './lib/inject';
 import { initNotificationEnv } from './lib/notifications';
 
 /**
@@ -13,13 +14,19 @@ interface Props {
   host: string;
 }
 export const AppMain: React.FC<Props> = React.memo((props) => {
+  const webviewRef = useRef<WebView>(null);
+
   useEffect(() => {
     initNotificationEnv();
+
+    if (webviewRef.current) {
+      webviewRef.current.injectJavaScript(generateInjectScript());
+    }
   }, []);
 
   return (
     <View style={styles.root}>
-      <WebView source={{ uri: props.host }} />
+      <WebView ref={webviewRef} source={{ uri: props.host }} />
     </View>
   );
 });

client/mobile/src/lib/inject/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 生成注入到Webview中的js代码
+ */
+export function generateInjectScript() {
+  // console.log(require('../../../dist/plugins/com.msgbyte.env.rn/index.js'));
+
+  return `alert(JSON.stringify(window.tailchat))`;
+}