Browse Source

添加 react-native-paper

master
zhangjiming 3 months ago
parent
commit
51ea932908
  1. 2
      .gitignore
  2. 3
      app.json
  3. 8
      app/(tabs)/index.tsx
  4. 3
      app/_layout.tsx
  5. 11
      babel.config.js
  6. 269
      package-lock.json
  7. 9
      package.json

2
.gitignore

@ -17,6 +17,8 @@ expo-env.d.ts
*.key *.key
*.mobileprovision *.mobileprovision
/android
# Metro # Metro
.metro-health-check* .metro-health-check*

3
app.json

@ -15,7 +15,8 @@
"adaptiveIcon": { "adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png", "foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}
},
"package": "com.anonymous.outlinern"
}, },
"web": { "web": {
"bundler": "metro", "bundler": "metro",

8
app/(tabs)/index.tsx

@ -4,6 +4,7 @@ import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView'; import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { Button } from 'react-native-paper';
export default function HomeScreen() { export default function HomeScreen() {
return ( return (
@ -16,9 +17,12 @@ export default function HomeScreen() {
/> />
}> }>
<ThemedView style={styles.titleContainer}> <ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<ThemedText type="title">Hello World!</ThemedText>
<HelloWave /> <HelloWave />
</ThemedView> </ThemedView>
<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
Press me
</Button>
<ThemedView style={styles.stepContainer}> <ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText> <ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText> <ThemedText>
@ -28,7 +32,7 @@ export default function HomeScreen() {
{Platform.select({ {Platform.select({
ios: 'cmd + d', ios: 'cmd + d',
android: 'cmd + m', android: 'cmd + m',
web: 'F12'
web: 'F12',
})} })}
</ThemedText>{' '} </ThemedText>{' '}
to open developer tools. to open developer tools.

3
app/_layout.tsx

@ -5,6 +5,7 @@ import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react'; import { useEffect } from 'react';
import 'react-native-reanimated'; import 'react-native-reanimated';
import { PaperProvider } from 'react-native-paper';
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from '@/hooks/useColorScheme';
@ -29,11 +30,13 @@ export default function RootLayout() {
return ( return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<PaperProvider>
<Stack> <Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" /> <Stack.Screen name="+not-found" />
</Stack> </Stack>
<StatusBar style="auto" /> <StatusBar style="auto" />
</PaperProvider>
</ThemeProvider> </ThemeProvider>
); );
} }

11
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'],
},
},
};
};

269
package-lock.json

@ -14,6 +14,7 @@
"expo": "~52.0.38", "expo": "~52.0.38",
"expo-blur": "~14.0.3", "expo-blur": "~14.0.3",
"expo-constants": "~17.0.8", "expo-constants": "~17.0.8",
"expo-dev-client": "~5.0.13",
"expo-font": "~13.0.4", "expo-font": "~13.0.4",
"expo-haptics": "~14.0.1", "expo-haptics": "~14.0.1",
"expo-linking": "~7.0.5", "expo-linking": "~7.0.5",
@ -27,9 +28,11 @@
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-native": "0.76.7", "react-native": "0.76.7",
"react-native-gesture-handler": "~2.20.2", "react-native-gesture-handler": "~2.20.2",
"react-native-paper": "^5.13.1",
"react-native-reanimated": "~3.16.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-screens": "~4.4.0",
"react-native-vector-icons": "^10.2.0",
"react-native-web": "~0.19.13", "react-native-web": "~0.19.13",
"react-native-webview": "13.12.5" "react-native-webview": "13.12.5"
}, },
@ -2218,6 +2221,28 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/@egjs/hammerjs": {
"version": "2.0.17", "version": "2.0.17",
"resolved": "https://registry.npmmirror.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", "resolved": "https://registry.npmmirror.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@ -6715,6 +6740,74 @@
"react-native": "*" "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": { "node_modules/expo-file-system": {
"version": "18.0.11", "version": "18.0.11",
"resolved": "https://registry.npmmirror.com/expo-file-system/-/expo-file-system-18.0.11.tgz", "resolved": "https://registry.npmmirror.com/expo-file-system/-/expo-file-system-18.0.11.tgz",
@ -6750,6 +6843,12 @@
"expo": "*" "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": { "node_modules/expo-keep-awake": {
"version": "14.0.3", "version": "14.0.3",
"resolved": "https://registry.npmmirror.com/expo-keep-awake/-/expo-keep-awake-14.0.3.tgz", "resolved": "https://registry.npmmirror.com/expo-keep-awake/-/expo-keep-awake-14.0.3.tgz",
@ -6774,6 +6873,19 @@
"react-native": "*" "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": { "node_modules/expo-modules-autolinking": {
"version": "2.0.8", "version": "2.0.8",
"resolved": "https://registry.npmmirror.com/expo-modules-autolinking/-/expo-modules-autolinking-2.0.8.tgz", "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": { "node_modules/expo-web-browser": {
"version": "14.0.2", "version": "14.0.2",
"resolved": "https://registry.npmmirror.com/expo-web-browser/-/expo-web-browser-14.0.2.tgz", "resolved": "https://registry.npmmirror.com/expo-web-browser/-/expo-web-browser-14.0.2.tgz",
@ -11744,6 +11865,57 @@
"react-native": ">=0.73.0" "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": { "node_modules/react-native-reanimated": {
"version": "3.16.7", "version": "3.16.7",
"resolved": "https://registry.npmmirror.com/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz", "resolved": "https://registry.npmmirror.com/react-native-reanimated/-/react-native-reanimated-3.16.7.tgz",
@ -11792,6 +11964,92 @@
"react-native": "*" "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": { "node_modules/react-native-web": {
"version": "0.19.13", "version": "0.19.13",
"resolved": "https://registry.npmmirror.com/react-native-web/-/react-native-web-0.19.13.tgz", "resolved": "https://registry.npmmirror.com/react-native-web/-/react-native-web-0.19.13.tgz",
@ -13780,6 +14038,15 @@
"browserslist": ">= 4.21.0" "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": { "node_modules/url-parse": {
"version": "1.5.10", "version": "1.5.10",
"resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz", "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz",

9
package.json

@ -5,8 +5,8 @@
"scripts": { "scripts": {
"start": "expo start", "start": "expo start",
"reset-project": "node ./scripts/reset-project.js", "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", "web": "expo start --web",
"test": "jest --watchAll", "test": "jest --watchAll",
"lint": "expo lint" "lint": "expo lint"
@ -21,6 +21,7 @@
"expo": "~52.0.38", "expo": "~52.0.38",
"expo-blur": "~14.0.3", "expo-blur": "~14.0.3",
"expo-constants": "~17.0.8", "expo-constants": "~17.0.8",
"expo-dev-client": "~5.0.13",
"expo-font": "~13.0.4", "expo-font": "~13.0.4",
"expo-haptics": "~14.0.1", "expo-haptics": "~14.0.1",
"expo-linking": "~7.0.5", "expo-linking": "~7.0.5",
@ -34,9 +35,11 @@
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-native": "0.76.7", "react-native": "0.76.7",
"react-native-gesture-handler": "~2.20.2", "react-native-gesture-handler": "~2.20.2",
"react-native-paper": "^5.13.1",
"react-native-reanimated": "~3.16.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-screens": "~4.4.0",
"react-native-vector-icons": "^10.2.0",
"react-native-web": "~0.19.13", "react-native-web": "~0.19.13",
"react-native-webview": "13.12.5" "react-native-webview": "13.12.5"
}, },

Loading…
Cancel
Save