From a15e1270a03d5942cf6f402ae32aed2769d4fb93 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Tue, 7 Feb 2023 14:37:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20react-native-webvi?= =?UTF-8?q?ew=20=E4=BB=A5=E6=98=BE=E7=A4=BA=E4=B8=BB=E8=A6=81=E5=86=85?= =?UTF-8?q?=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/mobile/.npmrc | 2 + client/mobile/.prettierrc.js | 8 +- client/mobile/App.tsx | 122 --------------------------- client/mobile/__tests__/App-test.tsx | 2 +- client/mobile/index.js | 2 +- client/mobile/ios/Podfile.lock | 6 ++ client/mobile/package.json | 3 +- client/mobile/src/App.tsx | 32 +++++++ client/mobile/src/AppMain.tsx | 24 ++++++ client/mobile/src/theme.ts | 6 ++ client/mobile/yarn.lock | 20 +++-- 11 files changed, 89 insertions(+), 138 deletions(-) create mode 100644 client/mobile/.npmrc delete mode 100644 client/mobile/App.tsx create mode 100644 client/mobile/src/App.tsx create mode 100644 client/mobile/src/AppMain.tsx create mode 100644 client/mobile/src/theme.ts diff --git a/client/mobile/.npmrc b/client/mobile/.npmrc new file mode 100644 index 00000000..059ab334 --- /dev/null +++ b/client/mobile/.npmrc @@ -0,0 +1,2 @@ +# https://npmmirror.com/ +registry = https://registry.npmmirror.com diff --git a/client/mobile/.prettierrc.js b/client/mobile/.prettierrc.js index 2b540746..f004026c 100644 --- a/client/mobile/.prettierrc.js +++ b/client/mobile/.prettierrc.js @@ -1,7 +1 @@ -module.exports = { - arrowParens: 'avoid', - bracketSameLine: true, - bracketSpacing: false, - singleQuote: true, - trailingComma: 'all', -}; +module.exports = require('../../.prettierrc.json'); diff --git a/client/mobile/App.tsx b/client/mobile/App.tsx deleted file mode 100644 index 96264faa..00000000 --- a/client/mobile/App.tsx +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - */ - -import React from 'react'; -import type { PropsWithChildren } from 'react'; -import { - SafeAreaView, - ScrollView, - StatusBar, - StyleSheet, - Text, - useColorScheme, - View, -} from 'react-native'; - -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -type SectionProps = PropsWithChildren<{ - title: string; -}>; - -function Section({ children, title }: SectionProps): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - return ( - - - {title} - - - {children} - - - ); -} - -function App(): JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; - - return ( - - - -
- -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - - ); -} - -const styles = StyleSheet.create({ - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - }, - highlight: { - fontWeight: '700', - }, -}); - -export default App; diff --git a/client/mobile/__tests__/App-test.tsx b/client/mobile/__tests__/App-test.tsx index 17847669..4edaa0a8 100644 --- a/client/mobile/__tests__/App-test.tsx +++ b/client/mobile/__tests__/App-test.tsx @@ -4,7 +4,7 @@ import 'react-native'; import React from 'react'; -import App from '../App'; +import App from '../src/App'; // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer'; diff --git a/client/mobile/index.js b/client/mobile/index.js index 9b739329..752e7ee3 100644 --- a/client/mobile/index.js +++ b/client/mobile/index.js @@ -3,7 +3,7 @@ */ import { AppRegistry } from 'react-native'; -import App from './App'; +import App from './src/App'; import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App); diff --git a/client/mobile/ios/Podfile.lock b/client/mobile/ios/Podfile.lock index f44a70cb..02184392 100644 --- a/client/mobile/ios/Podfile.lock +++ b/client/mobile/ios/Podfile.lock @@ -329,6 +329,8 @@ PODS: - React-jsinspector (0.71.2) - React-logger (0.71.2): - glog + - react-native-webview (11.26.1): + - React-Core - React-perflogger (0.71.2) - React-RCTActionSheet (0.71.2): - React-Core/RCTActionSheetHeaders (= 0.71.2) @@ -464,6 +466,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) + - react-native-webview (from `../node_modules/react-native-webview`) - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) @@ -538,6 +541,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" React-logger: :path: "../node_modules/react-native/ReactCommon/logger" + react-native-webview: + :path: "../node_modules/react-native-webview" React-perflogger: :path: "../node_modules/react-native/ReactCommon/reactperflogger" React-RCTActionSheet: @@ -601,6 +606,7 @@ SPEC CHECKSUMS: React-jsiexecutor: c7e028406112db456ac3cf5720d266bc7bc20938 React-jsinspector: ea8101acf525ec08b2d87ddf0637d45f8e3b4148 React-logger: 97987f46779d8dd24656474ad0c43a5b459f31d6 + react-native-webview: 9f111dfbcfc826084d6c507f569e5e03342ee1c1 React-perflogger: c7ccda3d1d1da837f7ff4e54e816022a6803ee87 React-RCTActionSheet: 01c125aebbad462a24228f68c584c7a921d6c28e React-RCTAnimation: 5277a9440acffc4a5b7baa6ae3880fe467277ae6 diff --git a/client/mobile/package.json b/client/mobile/package.json index bd0a967c..93f68c4e 100644 --- a/client/mobile/package.json +++ b/client/mobile/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "18.2.0", - "react-native": "0.71.2" + "react-native": "0.71.2", + "react-native-webview": "^11.26.1" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/client/mobile/src/App.tsx b/client/mobile/src/App.tsx new file mode 100644 index 00000000..56a2fd80 --- /dev/null +++ b/client/mobile/src/App.tsx @@ -0,0 +1,32 @@ +/** + * Sample React Native App + * https://github.com/facebook/react-native + * + * @format + */ + +import React from 'react'; +import { SafeAreaView, StatusBar, useColorScheme } from 'react-native'; +import { AppMain } from './AppMain'; +import { theme } from './theme'; + +function App(): JSX.Element { + const isDarkMode = useColorScheme() === 'dark'; + + const backgroundStyle = { + backgroundColor: isDarkMode ? theme.contentBg.dark : theme.contentBg.light, + }; + + return ( + + + + + + ); +} + +export default App; diff --git a/client/mobile/src/AppMain.tsx b/client/mobile/src/AppMain.tsx new file mode 100644 index 00000000..df27b57f --- /dev/null +++ b/client/mobile/src/AppMain.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { WebView } from 'react-native-webview'; + +/** + * Tailchat的主要内容 + * + * 由webview提供 + */ + +export const AppMain: React.FC = React.memo(() => { + return ( + + + + ); +}); +AppMain.displayName = 'AppMain'; + +const styles = StyleSheet.create({ + root: { + height: '100%', + }, +}); diff --git a/client/mobile/src/theme.ts b/client/mobile/src/theme.ts new file mode 100644 index 00000000..c174613b --- /dev/null +++ b/client/mobile/src/theme.ts @@ -0,0 +1,6 @@ +export const theme = { + contentBg: { + light: 'rgba(243, 244, 246, 1)', + dark: 'rgba(55, 65, 81, 1)', + }, +}; diff --git a/client/mobile/yarn.lock b/client/mobile/yarn.lock index 53872ad9..92547aec 100644 --- a/client/mobile/yarn.lock +++ b/client/mobile/yarn.lock @@ -2926,16 +2926,16 @@ escape-html@~1.0.3: resolved "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow== +escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0: + version "2.0.0" + resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" + integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== + escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== -escape-string-regexp@^2.0.0: - version "2.0.0" - resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" - integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== - escape-string-regexp@^4.0.0: version "4.0.0" resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" @@ -3738,7 +3738,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.4: has "^1.0.3" side-channel "^1.0.4" -invariant@*, invariant@^2.2.4: +invariant@*, invariant@2.2.4, invariant@^2.2.4: version "2.2.4" resolved "https://registry.npmmirror.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -5688,6 +5688,14 @@ react-native-gradle-plugin@^0.71.14: resolved "https://registry.npmmirror.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.14.tgz#cc399662f04fbfcc0e352d03eae1d3efbd5f635a" integrity sha512-nnLawTZEPPRAKq92UqDkzoGgCBl9aa9zAihFHMwmwzn4WRVdK4O6Cd4XYiyoNOiQzx3Hh9k5WOckHE80C92ivQ== +react-native-webview@^11.26.1: + version "11.26.1" + resolved "https://registry.npmmirror.com/react-native-webview/-/react-native-webview-11.26.1.tgz#658c09ed5162dc170b361e48c2dd26c9712879da" + integrity sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw== + dependencies: + escape-string-regexp "2.0.0" + invariant "2.2.4" + react-native@0.71.2: version "0.71.2" resolved "https://registry.npmmirror.com/react-native/-/react-native-0.71.2.tgz#b6977eda2a6dc10baa006bf4ab1ee08318607ce9"