diff --git a/client/mobile/ios/Podfile.lock b/client/mobile/ios/Podfile.lock index b24087ae..44d6f756 100644 --- a/client/mobile/ios/Podfile.lock +++ b/client/mobile/ios/Podfile.lock @@ -423,14 +423,16 @@ PODS: - React - RNCAsyncStorage (1.17.11): - React-Core + - RNDeviceInfo (10.5.1): + - React-Core - RNGestureHandler (2.9.0): - React-Core - RNLocalize (2.2.6): - React-Core - - RNNotifee (7.4.0): + - RNNotifee (7.6.1): - React-Core - - RNNotifee/NotifeeCore (= 7.4.0) - - RNNotifee/NotifeeCore (7.4.0): + - RNNotifee/NotifeeCore (= 7.6.1) + - RNNotifee/NotifeeCore (7.6.1): - React-Core - RNReanimated (2.14.4): - DoubleConversion @@ -527,6 +529,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - ReactNativeUiLib (from `../node_modules/react-native-ui-lib`) - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" + - RNDeviceInfo (from `../node_modules/react-native-device-info`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNLocalize (from `../node_modules/react-native-localize`) - "RNNotifee (from `../node_modules/@notifee/react-native`)" @@ -626,6 +629,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-ui-lib" RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" + RNDeviceInfo: + :path: "../node_modules/react-native-device-info" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" RNLocalize: @@ -688,9 +693,10 @@ SPEC CHECKSUMS: ReactCommon: f697c0ac52e999aa818e43e2b6f277787c735e2d ReactNativeUiLib: 8d3804947431a465a69f09c5e785c988314612a9 RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 + RNDeviceInfo: fb81318c9cd5ebe30ebf12bcd046d818c87f9b53 RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 - RNNotifee: da8dcf09f079ea22f46e239d7c406e10d4525a5f + RNNotifee: bdc064c29f4d558046f51f0c3ae02bab4fd3cd85 RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128 SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: 5b0304b3dbef2b52e078052138e23a19c7dacaef diff --git a/client/mobile/package.json b/client/mobile/package.json index 83eca666..02cb40fe 100644 --- a/client/mobile/package.json +++ b/client/mobile/package.json @@ -25,6 +25,7 @@ "react": "18.2.0", "react-native": "0.71.2", "react-native-config": "^1.5.0", + "react-native-device-info": "^10.5.1", "react-native-gesture-handler": "^2.9.0", "react-native-localize": "^2.2.6", "react-native-reanimated": "^2.14.4", diff --git a/client/mobile/src/AppMain.tsx b/client/mobile/src/AppMain.tsx index e92a55fd..ade2b821 100644 --- a/client/mobile/src/AppMain.tsx +++ b/client/mobile/src/AppMain.tsx @@ -1,7 +1,7 @@ import React, { useRef } from 'react'; import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; -import { generatePostMessageScript } from './lib/inject'; +import { generateInjectedScript } from './lib/inject'; import { handleTailchatMessage } from './lib/inject/message-handler'; /** @@ -21,7 +21,7 @@ export const AppMain: React.FC = React.memo((props) => { { if (!webviewRef.current) { return; diff --git a/client/mobile/src/lib/inject/index.ts b/client/mobile/src/lib/inject/index.ts index 2fa48554..2a508774 100644 --- a/client/mobile/src/lib/inject/index.ts +++ b/client/mobile/src/lib/inject/index.ts @@ -1,4 +1,4 @@ -// @ts-nocheck +import { getVersion, getReadableVersion } from 'react-native-device-info'; /** * 生成注入到Webview中的js代码 @@ -27,7 +27,15 @@ export function generateInstallPluginScript() { return raw; } -export function generatePostMessageScript() { +export function generateInjectedScript(): string { + return [generateDeviceInfo(), generatePostMessageScript()].join(';'); +} + +function generateDeviceInfo() { + return `window.__rnDeviceInfo = { version: "${getVersion()}", readableVersion: "${getReadableVersion()}" }`; +} + +function generatePostMessageScript() { return `window.postMessage = function (data) { window.ReactNativeWebView.postMessage(JSON.stringify(data)); };`; diff --git a/client/mobile/yarn.lock b/client/mobile/yarn.lock index 160ff031..dfafbafd 100644 --- a/client/mobile/yarn.lock +++ b/client/mobile/yarn.lock @@ -7132,6 +7132,11 @@ react-native-config@^1.5.0: resolved "https://registry.npmmirror.com/react-native-config/-/react-native-config-1.5.0.tgz#ff5a78fbbc2c2a0525788e5f3c86101110651ba4" integrity sha512-slecooA/0tCwhb+RuWEbwLqtKirGh9vWPRpgDfH7uPAraCciqHNH2XjS9ylW+Spn4FUrHg5KWTqUGs9BdBADHg== +react-native-device-info@^10.5.1: + version "10.5.1" + resolved "https://registry.npmmirror.com/react-native-device-info/-/react-native-device-info-10.5.1.tgz#16a24e2b32c14af1b00994019c850ad2088b30f3" + integrity sha512-fOoynmthZnoP7avXpUE/RP8F6Fw/ThFd3aF2C+jbyNCls9+ls4SKU7/opQJvZxd2/9vo//jBJ8AEloEcTpBIqw== + react-native-gesture-handler@^2.9.0: version "2.9.0" resolved "https://registry.npmmirror.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241" diff --git a/client/web/plugins/com.msgbyte.env.rn/src/DeviceInfoPanel.tsx b/client/web/plugins/com.msgbyte.env.rn/src/DeviceInfoPanel.tsx new file mode 100644 index 00000000..bdf6240b --- /dev/null +++ b/client/web/plugins/com.msgbyte.env.rn/src/DeviceInfoPanel.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Translate } from './translate'; + +interface WindowRnDeviceInfo { + version: string; + readableVersion: string; +} + +export const DeviceInfoPanel: React.FC = React.memo(() => { + const deviceInfo: WindowRnDeviceInfo = (window as any).__rnDeviceInfo ?? {}; + return ( +
+
+ {Translate.clientVersion}: {deviceInfo.version}( + {deviceInfo.readableVersion}) +
+
+ ); +}); +DeviceInfoPanel.displayName = 'DeviceInfoPanel'; diff --git a/client/web/plugins/com.msgbyte.env.rn/src/index.tsx b/client/web/plugins/com.msgbyte.env.rn/src/index.tsx index 2395b6a6..2a0a2c72 100644 --- a/client/web/plugins/com.msgbyte.env.rn/src/index.tsx +++ b/client/web/plugins/com.msgbyte.env.rn/src/index.tsx @@ -5,13 +5,23 @@ import { getCachedBaseGroupInfo, getMessageTextDecorators, getServiceUrl, + regCustomPanel, } from '@capital/common'; +import { DeviceInfoPanel } from './DeviceInfoPanel'; import { Translate } from './translate'; const PLUGIN_NAME = 'ReactNative Support'; console.log(`Plugin ${PLUGIN_NAME} is loaded`); +regCustomPanel({ + position: 'setting', + icon: '', + name: 'com.msgbyte.env.rn/deviceInfoPanel', + label: Translate.deviceInfo, + render: DeviceInfoPanel, +}); + /** * 转发事件 */ diff --git a/client/web/plugins/com.msgbyte.env.rn/src/translate.ts b/client/web/plugins/com.msgbyte.env.rn/src/translate.ts index 19985334..e0eb977e 100644 --- a/client/web/plugins/com.msgbyte.env.rn/src/translate.ts +++ b/client/web/plugins/com.msgbyte.env.rn/src/translate.ts @@ -9,4 +9,12 @@ export const Translate = { 'zh-CN': '私信', 'en-US': 'DM', }), + deviceInfo: localTrans({ + 'zh-CN': '设备信息', + 'en-US': 'Device Info', + }), + clientVersion: localTrans({ + 'zh-CN': '客户端版本号', + 'en-US': 'Client Version', + }), };