From 51ea9329081dc746058613cca6b1126616ac4dd8 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Fri, 14 Mar 2025 10:14:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20react-native-paper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 + app.json | 3 +- app/(tabs)/index.tsx | 8 +- app/_layout.tsx | 13 ++- babel.config.js | 11 +++ package-lock.json | 269 ++++++++++++++++++++++++++++++++++++++++++++++++++- package.json | 9 +- 7 files changed, 303 insertions(+), 12 deletions(-) create mode 100644 babel.config.js diff --git a/.gitignore b/.gitignore index c9d575d..28f5af2 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,8 @@ expo-env.d.ts *.key *.mobileprovision +/android + # Metro .metro-health-check* diff --git a/app.json b/app.json index 2d913a3..43d24a1 100644 --- a/app.json +++ b/app.json @@ -15,7 +15,8 @@ "adaptiveIcon": { "foregroundImage": "./assets/images/adaptive-icon.png", "backgroundColor": "#ffffff" - } + }, + "package": "com.anonymous.outlinern" }, "web": { "bundler": "metro", diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 886b079..80db077 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -4,6 +4,7 @@ import { HelloWave } from '@/components/HelloWave'; import ParallaxScrollView from '@/components/ParallaxScrollView'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; +import { Button } from 'react-native-paper'; export default function HomeScreen() { return ( @@ -16,9 +17,12 @@ export default function HomeScreen() { /> }> - Welcome! + Hello World! + Step 1: Try it @@ -28,7 +32,7 @@ export default function HomeScreen() { {Platform.select({ ios: 'cmd + d', android: 'cmd + m', - web: 'F12' + web: 'F12', })} {' '} to open developer tools. diff --git a/app/_layout.tsx b/app/_layout.tsx index db74578..f3ddbc0 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -5,6 +5,7 @@ import * as SplashScreen from 'expo-splash-screen'; import { StatusBar } from 'expo-status-bar'; import { useEffect } from 'react'; import 'react-native-reanimated'; +import { PaperProvider } from 'react-native-paper'; import { useColorScheme } from '@/hooks/useColorScheme'; @@ -29,11 +30,13 @@ export default function RootLayout() { return ( - - - - - + + + + + + + ); } diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..0ce7366 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,11 @@ +module.exports = function(api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + env: { + production: { + plugins: ['react-native-paper/babel'], + }, + }, + }; + }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 97172ee..9493c27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "expo": "~52.0.38", "expo-blur": "~14.0.3", "expo-constants": "~17.0.8", + "expo-dev-client": "~5.0.13", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", "expo-linking": "~7.0.5", @@ -27,9 +28,11 @@ "react-dom": "18.3.1", "react-native": "0.76.7", "react-native-gesture-handler": "~2.20.2", + "react-native-paper": "^5.13.1", "react-native-reanimated": "~3.16.1", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0", + "react-native-vector-icons": "^10.2.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" }, @@ -2218,6 +2221,28 @@ "dev": true, "license": "MIT" }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.9", + "resolved": "https://registry.npmmirror.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz", + "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==", + "license": "MIT", + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", "resolved": "https://registry.npmmirror.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", @@ -6715,6 +6740,74 @@ "react-native": "*" } }, + "node_modules/expo-dev-client": { + "version": "5.0.13", + "resolved": "https://registry.npmmirror.com/expo-dev-client/-/expo-dev-client-5.0.13.tgz", + "integrity": "sha512-+Io9uhlOXnL+qmNd3gC8RoCBSGH+2g/a4v/mcX3QrCfBXwMN17w8R+FoUoEnM3CTQxo1NI/5bsZnjVD4o+Lr+w==", + "license": "MIT", + "dependencies": { + "expo-dev-launcher": "5.0.30", + "expo-dev-menu": "6.0.20", + "expo-dev-menu-interface": "1.9.3", + "expo-manifests": "~0.15.7", + "expo-updates-interface": "~1.0.0" + }, + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-dev-launcher": { + "version": "5.0.30", + "resolved": "https://registry.npmmirror.com/expo-dev-launcher/-/expo-dev-launcher-5.0.30.tgz", + "integrity": "sha512-II2qQkTelIzaB9nWQJJwbRLSsDYDz3gRuFJ/wZpzX8/5CzsimvhbMslb6Zx8jAiBEzs+fquTmZSOhpYPKtGCiQ==", + "license": "MIT", + "dependencies": { + "ajv": "8.11.0", + "expo-dev-menu": "6.0.20", + "expo-manifests": "~0.15.7", + "resolve-from": "^5.0.0" + }, + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-dev-launcher/node_modules/ajv": { + "version": "8.11.0", + "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.11.0.tgz", + "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==", + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/expo-dev-menu": { + "version": "6.0.20", + "resolved": "https://registry.npmmirror.com/expo-dev-menu/-/expo-dev-menu-6.0.20.tgz", + "integrity": "sha512-+ha876lpGAsRB9lqT7WRtcSvxZg2CjXKWkCSAghToyx4Wti1u3M/y3onJ4oOvddtKuFfFX4IRmnZYI3xi/TDCQ==", + "license": "MIT", + "dependencies": { + "expo-dev-menu-interface": "1.9.3" + }, + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-dev-menu-interface": { + "version": "1.9.3", + "resolved": "https://registry.npmmirror.com/expo-dev-menu-interface/-/expo-dev-menu-interface-1.9.3.tgz", + "integrity": "sha512-KY/dWTBE1l47i9V366JN5rC6YIdOc9hz8yAmZzkl5DrPia5l3M2WIjtnpHC9zUkNjiSiG2urYoOAq4H/uLdmyg==", + "license": "MIT", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-file-system": { "version": "18.0.11", "resolved": "https://registry.npmmirror.com/expo-file-system/-/expo-file-system-18.0.11.tgz", @@ -6750,6 +6843,12 @@ "expo": "*" } }, + "node_modules/expo-json-utils": { + "version": "0.14.0", + "resolved": "https://registry.npmmirror.com/expo-json-utils/-/expo-json-utils-0.14.0.tgz", + "integrity": "sha512-xjGfK9dL0B1wLnOqNkX0jM9p48Y0I5xEPzHude28LY67UmamUyAACkqhZGaPClyPNfdzczk7Ej6WaRMT3HfXvw==", + "license": "MIT" + }, "node_modules/expo-keep-awake": { "version": "14.0.3", "resolved": "https://registry.npmmirror.com/expo-keep-awake/-/expo-keep-awake-14.0.3.tgz", @@ -6774,6 +6873,19 @@ "react-native": "*" } }, + "node_modules/expo-manifests": { + "version": "0.15.7", + "resolved": "https://registry.npmmirror.com/expo-manifests/-/expo-manifests-0.15.7.tgz", + "integrity": "sha512-IVzLcPamzUi4Br96xw6JPHaa1vjYupUnMqYyV1Mtd9VQojS5hJsf5VcVzbAMZE/cFGzWLZ1oJa6QXxYjN39Uww==", + "license": "MIT", + "dependencies": { + "@expo/config": "~10.0.10", + "expo-json-utils": "~0.14.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "2.0.8", "resolved": "https://registry.npmmirror.com/expo-modules-autolinking/-/expo-modules-autolinking-2.0.8.tgz", @@ -6945,6 +7057,15 @@ } } }, + "node_modules/expo-updates-interface": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/expo-updates-interface/-/expo-updates-interface-1.0.0.tgz", + "integrity": "sha512-93oWtvULJOj+Pp+N/lpTcFfuREX1wNeHtp7Lwn8EbzYYmdn37MvZU3TPW2tYYCZuhzmKEXnUblYcruYoDu7IrQ==", + "license": "MIT", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-web-browser": { "version": "14.0.2", "resolved": "https://registry.npmmirror.com/expo-web-browser/-/expo-web-browser-14.0.2.tgz", @@ -11744,6 +11865,57 @@ "react-native": ">=0.73.0" } }, + "node_modules/react-native-paper": { + "version": "5.13.1", + "resolved": "https://registry.npmmirror.com/react-native-paper/-/react-native-paper-5.13.1.tgz", + "integrity": "sha512-8frKVKJ5JBd8WL1G3tpcYzOgK40kxkD/U+yLHGKNeLnD6v1Qc9W6DxWTHWN7lsX/DPYnhgvw1aKkYaPTmDj5pg==", + "license": "MIT", + "dependencies": { + "@callstack/react-theme-provider": "^3.0.9", + "color": "^3.1.2", + "use-latest-callback": "^0.1.5" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*", + "react-native-vector-icons": "*" + } + }, + "node_modules/react-native-paper/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmmirror.com/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "license": "MIT", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/react-native-paper/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "license": "MIT", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/react-native-paper/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "license": "MIT" + }, + "node_modules/react-native-paper/node_modules/use-latest-callback": { + "version": "0.1.11", + "resolved": "https://registry.npmmirror.com/use-latest-callback/-/use-latest-callback-0.1.11.tgz", + "integrity": "sha512-8nhb73STSD/z3GTHklvNjL8F9wMOo0bj0AFnulpIYuFTm6aQlT3ZcNbXF2YurKImIY8+kpSFSDHZZyQmurGrhw==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/react-native-reanimated": { "version": "3.16.7", "resolved": "https://registry.npmmirror.com/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz", @@ -11792,6 +11964,92 @@ "react-native": "*" } }, + "node_modules/react-native-vector-icons": { + "version": "10.2.0", + "resolved": "https://registry.npmmirror.com/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz", + "integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa-upgrade.sh": "bin/fa-upgrade.sh", + "fa5-upgrade": "bin/fa5-upgrade.sh", + "fa6-upgrade": "bin/fa6-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "license": "MIT" + }, + "node_modules/react-native-vector-icons/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "license": "MIT", + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "license": "ISC", + "engines": { + "node": ">=10" + } + }, "node_modules/react-native-web": { "version": "0.19.13", "resolved": "https://registry.npmmirror.com/react-native-web/-/react-native-web-0.19.13.tgz", @@ -13780,6 +14038,15 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "license": "BSD-2-Clause", + "dependencies": { + "punycode": "^2.1.0" + } + }, "node_modules/url-parse": { "version": "1.5.10", "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz", diff --git a/package.json b/package.json index 7976768..468f1fa 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", - "android": "expo start --android", - "ios": "expo start --ios", + "android": "expo run:android", + "ios": "expo run:ios", "web": "expo start --web", "test": "jest --watchAll", "lint": "expo lint" @@ -21,6 +21,7 @@ "expo": "~52.0.38", "expo-blur": "~14.0.3", "expo-constants": "~17.0.8", + "expo-dev-client": "~5.0.13", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", "expo-linking": "~7.0.5", @@ -34,9 +35,11 @@ "react-dom": "18.3.1", "react-native": "0.76.7", "react-native-gesture-handler": "~2.20.2", + "react-native-paper": "^5.13.1", "react-native-reanimated": "~3.16.1", - "react-native-safe-area-context": "4.12.0", + "react-native-safe-area-context": "^4.12.0", "react-native-screens": "~4.4.0", + "react-native-vector-icons": "^10.2.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" },