This commit is contained in:
oneao committed 2025-10-27 22:25:58 +08:00
1 parent b9744acdc0
commit 2f021ec51f
13 files changed
+277 -73

No files matched your search

+2 -1
View File
@@ -28,7 +28,8 @@
"favicon": "./assets/favicon.png" "favicon": "./assets/favicon.png"
}, },
"plugins": [ "plugins": [
"expo-router" "expo-router",
"expo-font"
] ]
} }
} }
+1
View File
@@ -11,5 +11,6 @@ export default antfu({
'@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告 '@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告
'no-console': 'off', // 关闭 console 报错 'no-console': 'off', // 关闭 console 报错
'node/prefer-global/process': 'off', 'node/prefer-global/process': 'off',
'@typescript-eslint/no-require-imports': 'off',
}, },
}) })
+4
View File
@@ -16,9 +16,13 @@
"@gluestack/ui-next-adapter": "^3.0.3", "@gluestack/ui-next-adapter": "^3.0.3",
"expo": "~54.0.20", "expo": "~54.0.20",
"expo-constants": "~18.0.10", "expo-constants": "~18.0.10",
"expo-font": "~14.0.9",
"expo-linking": "~8.0.8", "expo-linking": "~8.0.8",
"expo-router": "~6.0.13", "expo-router": "~6.0.13",
"expo-splash-screen": "~31.0.10",
"expo-status-bar": "~3.0.8", "expo-status-bar": "~3.0.8",
"lottie-react-native": "~7.3.4",
"lucide-react-native": "^0.548.0",
"nativewind": "^4.2.1", "nativewind": "^4.2.1",
"react": "19.1.0", "react": "19.1.0",
"react-native": "0.81.5", "react-native": "0.81.5",
+55 -8
View File
@@ -26,15 +26,27 @@ importers:
expo-constants: expo-constants:
specifier: ~18.0.10 specifier: ~18.0.10
version: 18.0.10(expo@54.0.20)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)) version: 18.0.10(expo@54.0.20)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))
expo-font:
specifier: ~14.0.9
version: 14.0.9(expo@54.0.20)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo-linking: expo-linking:
specifier: ~8.0.8 specifier: ~8.0.8
version: 8.0.8(expo@54.0.20)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0) version: 8.0.8(expo@54.0.20)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo-router: expo-router:
specifier: ~6.0.13 specifier: ~6.0.13
version: 6.0.13(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.10)(expo-linking@8.0.8)(expo@54.0.20)(react-dom@19.2.0(react@19.1.0))(react-native-reanimated@3.17.5(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.2.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0) version: 6.0.13(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.10)(expo-linking@8.0.8)(expo@54.0.20)(react-dom@19.2.0(react@19.1.0))(react-native-reanimated@3.17.5(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.2.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo-splash-screen:
specifier: ~31.0.10
version: 31.0.10(expo@54.0.20)
expo-status-bar: expo-status-bar:
specifier: ~3.0.8 specifier: ~3.0.8
version: 3.0.8(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0) version: 3.0.8(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
lottie-react-native:
specifier: ~7.3.4
version: 7.3.4(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
lucide-react-native:
specifier: ^0.548.0
version: 0.548.0(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
nativewind: nativewind:
specifier: ^4.2.1 specifier: ^4.2.1
version: 4.2.1(react-native-reanimated@3.17.5(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(tailwindcss@3.4.17) version: 4.2.1(react-native-reanimated@3.17.5(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(tailwindcss@3.4.17)
@@ -2974,6 +2986,11 @@ packages:
resolution: {integrity: sha512-QlQLjFuwgCiBc+Qq0IyBBHiZK1RS0NJSsKVB5iECMJrR04q7PhkaF7dON0fhvo00COy4fT9rJ5brrJDpFro/gA==} resolution: {integrity: sha512-QlQLjFuwgCiBc+Qq0IyBBHiZK1RS0NJSsKVB5iECMJrR04q7PhkaF7dON0fhvo00COy4fT9rJ5brrJDpFro/gA==}
engines: {node: '>=20.16.0'} engines: {node: '>=20.16.0'}
expo-splash-screen@31.0.10:
resolution: {integrity: sha512-i6g9IK798mae4yvflstQ1HkgahIJ6exzTCTw4vEdxV0J2SwiW3Tj+CwRjf0te7Zsb+7dDQhBTmGZwdv00VER2A==}
peerDependencies:
expo: '*'
expo-status-bar@3.0.8: expo-status-bar@3.0.8:
resolution: {integrity: sha512-L248XKPhum7tvREoS1VfE0H6dPCaGtoUWzRsUv7hGKdiB4cus33Rc0sxkWkoQ77wE8stlnUlL5lvmT0oqZ3ZBw==} resolution: {integrity: sha512-L248XKPhum7tvREoS1VfE0H6dPCaGtoUWzRsUv7hGKdiB4cus33Rc0sxkWkoQ77wE8stlnUlL5lvmT0oqZ3ZBw==}
peerDependencies: peerDependencies:
@@ -3506,56 +3523,48 @@ packages:
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [glibc]
lightningcss-linux-arm64-gnu@1.30.2: lightningcss-linux-arm64-gnu@1.30.2:
resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==} resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [glibc]
lightningcss-linux-arm64-musl@1.27.0: lightningcss-linux-arm64-musl@1.27.0:
resolution: {integrity: sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==} resolution: {integrity: sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [musl]
lightningcss-linux-arm64-musl@1.30.2: lightningcss-linux-arm64-musl@1.30.2:
resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==} resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
libc: [musl]
lightningcss-linux-x64-gnu@1.27.0: lightningcss-linux-x64-gnu@1.27.0:
resolution: {integrity: sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==} resolution: {integrity: sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [glibc]
lightningcss-linux-x64-gnu@1.30.2: lightningcss-linux-x64-gnu@1.30.2:
resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==} resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [glibc]
lightningcss-linux-x64-musl@1.27.0: lightningcss-linux-x64-musl@1.27.0:
resolution: {integrity: sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==} resolution: {integrity: sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [musl]
lightningcss-linux-x64-musl@1.30.2: lightningcss-linux-x64-musl@1.30.2:
resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==} resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
libc: [musl]
lightningcss-win32-arm64-msvc@1.27.0: lightningcss-win32-arm64-msvc@1.27.0:
resolution: {integrity: sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==} resolution: {integrity: sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==}
@@ -3631,12 +3640,32 @@ packages:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true hasBin: true
lottie-react-native@7.3.4:
resolution: {integrity: sha512-XUh7eGFb7ID8JRdU6U4N4cYQeYmjtdQRvd8ZXJ6xrdSsn5gZD0c79ITOREPcwJg4YupBFHgyV1GXdAHQP+KYUQ==}
peerDependencies:
'@lottiefiles/dotlottie-react': ^0.13.5
react: '*'
react-native: '>=0.46'
react-native-windows: '>=0.63.x'
peerDependenciesMeta:
'@lottiefiles/dotlottie-react':
optional: true
react-native-windows:
optional: true
lru-cache@10.4.3: lru-cache@10.4.3:
resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
lru-cache@5.1.1: lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
lucide-react-native@0.548.0:
resolution: {integrity: sha512-me46HEAZsJJLH3/5FVBOcr3NFkwHZSsaEi2MSlbyGvqx4aVQA8XNDAepYqCleTWpOz+iM3A0J8VAZXg3um810Q==}
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-native: '*'
react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
magic-string@0.30.21: magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
@@ -9035,6 +9064,13 @@ snapshots:
expo-server@1.0.2: {} expo-server@1.0.2: {}
expo-splash-screen@31.0.10(expo@54.0.20):
dependencies:
'@expo/prebuild-config': 54.0.6(expo@54.0.20)
expo: 54.0.20(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.13)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
transitivePeerDependencies:
- supports-color
expo-status-bar@3.0.8(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0): expo-status-bar@3.0.8(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies: dependencies:
react: 19.1.0 react: 19.1.0
@@ -9664,12 +9700,23 @@ snapshots:
dependencies: dependencies:
js-tokens: 4.0.0 js-tokens: 4.0.0
lottie-react-native@7.3.4(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies:
react: 19.1.0
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
lru-cache@10.4.3: {} lru-cache@10.4.3: {}
lru-cache@5.1.1: lru-cache@5.1.1:
dependencies: dependencies:
yallist: 3.1.1 yallist: 3.1.1
lucide-react-native@0.548.0(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies:
react: 19.1.0
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
react-native-svg: 15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
magic-string@0.30.21: magic-string@0.30.21:
dependencies: dependencies:
'@jridgewell/sourcemap-codec': 1.5.5 '@jridgewell/sourcemap-codec': 1.5.5
@@ -0,0 +1,23 @@
import FontAwesome from '@expo/vector-icons/FontAwesome'
import { Tabs } from 'expo-router'
export default function TabLayout() {
return (
<Tabs screenOptions={{ tabBarActiveTintColor: 'blue', tabBarShowLabel: false }}>
<Tabs.Screen
name="index"
options={{
headerShown: false,
tabBarIcon: ({ color }) => <FontAwesome size={28} name="home" color={color} />,
}}
/>
<Tabs.Screen
name="settings"
options={{
headerShown: false,
tabBarIcon: ({ color }) => <FontAwesome size={28} name="cog" color={color} />,
}}
/>
</Tabs>
)
}
@@ -0,0 +1,26 @@
import { Ionicons } from '@expo/vector-icons'
import { router } from 'expo-router'
import { StyleSheet, Text, View } from 'react-native'
import { Button, ButtonIcon, ButtonText } from '@/components/ui/button'
export default function Tab() {
const to404 = () => {
router.navigate('/abc')
}
return (
<View style={styles.container}>
<Button onPress={to404} className="flex items-center justify-center">
<ButtonText size="sm">测试</ButtonText>
</Button>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native'
export default function Tab() {
return (
<View style={styles.container}>
<Text>Tab [Settings]</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
+20 -4
View File
@@ -1,9 +1,25 @@
import { Text, View } from 'react-native' import { router, Stack } from 'expo-router'
import LottieView from 'lottie-react-native'
import { ArrowLeft } from 'lucide-react-native'
import { View } from 'react-native'
import { Button, ButtonIcon, ButtonText } from '@/components/ui/button'
export default function NotFound() { export default function NotFound() {
return ( return (
<View> <>
<Text>404</Text> <Stack.Screen options={{ headerShown: false }} />
</View> <View className="flex-1 justify-center items-center bg-white">
<LottieView
source={require('@/static/lottie/404.json')}
style={{ width: 300, height: 300 }}
autoPlay
loop
/>
<Button onPress={() => router.replace('/')}>
<ButtonIcon as={ArrowLeft} />
<ButtonText>返回应用首页</ButtonText>
</Button>
</View>
</>
) )
} }
+38 -3
View File
@@ -1,14 +1,49 @@
import type { ErrorBoundaryProps } from 'expo-router'
import { useFonts } from 'expo-font'
import { Stack } from 'expo-router' import { Stack } from 'expo-router'
import * as SplashScreen from 'expo-splash-screen'
import { StatusBar } from 'expo-status-bar' import { StatusBar } from 'expo-status-bar'
import { useEffect } from 'react'
import { Text, View } from 'react-native'
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider' import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
import '@/styles/global.css' import '@/styles/global.css'
SplashScreen.preventAutoHideAsync()
export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
return (
<View style={{ flex: 1 }}>
<Text>{error.message}</Text>
<Text onPress={retry}>Try Again?</Text>
</View>
)
}
export default function Layout() { export default function Layout() {
const [loaded, error] = useFonts({
SpaceMono: require('@/static/fonts/SpaceMono-Regular.ttf'),
})
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync()
}
}, [loaded])
// 模拟错误,100%发生
throw new Error('模拟错误测试 ErrorBoundary!')
return ( return (
<GluestackUIProvider> <GluestackUIProvider>
<Stack> <Stack
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> screenOptions={{
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} /> headerTitleAlign: 'center',
animation: 'slide_from_right',
}}
>
<Stack.Screen
name="(tabs)"
options={{ headerShown: false }}
/>
</Stack> </Stack>
<StatusBar style="auto" /> <StatusBar style="auto" />
</GluestackUIProvider> </GluestackUIProvider>
@@ -1,27 +1,28 @@
'use client'; 'use client'
import React from 'react'; import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils'
import { createButton } from '@gluestack-ui/core/button/creator'; import { createButton } from '@gluestack-ui/core/button/creator'
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator'
import { import {
tva, tva,
withStyleContext,
useStyleContext, useStyleContext,
type VariantProps,
} from '@gluestack-ui/utils/nativewind-utils';
import { cssInterop } from 'nativewind';
import { ActivityIndicator, Pressable, Text, View } from 'react-native';
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
const SCOPE = 'BUTTON'; withStyleContext,
} from '@gluestack-ui/utils/nativewind-utils'
import { cssInterop } from 'nativewind'
import React from 'react'
import { ActivityIndicator, Pressable, Text, View } from 'react-native'
const Root = withStyleContext(Pressable, SCOPE); const SCOPE = 'BUTTON'
const Root = withStyleContext(Pressable, SCOPE)
const UIButton = createButton({ const UIButton = createButton({
Root: Root, Root,
Text, Text,
Group: View, Group: View,
Spinner: ActivityIndicator, Spinner: ActivityIndicator,
Icon: UIIcon, Icon: UIIcon,
}); })
cssInterop(PrimitiveIcon, { cssInterop(PrimitiveIcon, {
className: { className: {
@@ -34,7 +35,7 @@ cssInterop(PrimitiveIcon, {
stroke: true, stroke: true,
}, },
}, },
}); })
const buttonStyle = tva({ const buttonStyle = tva({
base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2', base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
@@ -116,7 +117,7 @@ const buttonStyle = tva({
'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
}, },
], ],
}); })
const buttonTextStyle = tva({ const buttonTextStyle = tva({
base: 'text-typography-0 font-semibold web:select-none', base: 'text-typography-0 font-semibold web:select-none',
@@ -195,7 +196,7 @@ const buttonTextStyle = tva({
'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
}, },
], ],
}); })
const buttonIconStyle = tva({ const buttonIconStyle = tva({
base: 'fill-none', base: 'fill-none',
@@ -251,7 +252,7 @@ const buttonIconStyle = tva({
'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
}, },
], ],
}); })
const buttonGroupStyle = tva({ const buttonGroupStyle = tva({
base: '', base: '',
@@ -276,13 +277,13 @@ const buttonGroupStyle = tva({
'column-reverse': 'flex-col-reverse', 'column-reverse': 'flex-col-reverse',
}, },
}, },
}); })
type IButtonProps = Omit< type IButtonProps = Omit<
React.ComponentPropsWithoutRef<typeof UIButton>, React.ComponentPropsWithoutRef<typeof UIButton>,
'context' 'context'
> & >
VariantProps<typeof buttonStyle> & { className?: string }; & VariantProps<typeof buttonStyle> & { className?: string }
const Button = React.forwardRef< const Button = React.forwardRef<
React.ElementRef<typeof UIButton>, React.ElementRef<typeof UIButton>,
@@ -290,7 +291,7 @@ const Button = React.forwardRef<
>( >(
( (
{ className, variant = 'solid', size = 'md', action = 'primary', ...props }, { className, variant = 'solid', size = 'md', action = 'primary', ...props },
ref ref,
) => { ) => {
return ( return (
<UIButton <UIButton
@@ -299,12 +300,12 @@ const Button = React.forwardRef<
className={buttonStyle({ variant, size, action, class: className })} className={buttonStyle({ variant, size, action, class: className })}
context={{ variant, size, action }} context={{ variant, size, action }}
/> />
); )
} },
); )
type IButtonTextProps = React.ComponentPropsWithoutRef<typeof UIButton.Text> & type IButtonTextProps = React.ComponentPropsWithoutRef<typeof UIButton.Text>
VariantProps<typeof buttonTextStyle> & { className?: string }; & VariantProps<typeof buttonTextStyle> & { className?: string }
const ButtonText = React.forwardRef< const ButtonText = React.forwardRef<
React.ElementRef<typeof UIButton.Text>, React.ElementRef<typeof UIButton.Text>,
@@ -314,7 +315,7 @@ const ButtonText = React.forwardRef<
variant: parentVariant, variant: parentVariant,
size: parentSize, size: parentSize,
action: parentAction, action: parentAction,
} = useStyleContext(SCOPE); } = useStyleContext(SCOPE)
return ( return (
<UIButton.Text <UIButton.Text
@@ -332,18 +333,18 @@ const ButtonText = React.forwardRef<
class: className, class: className,
})} })}
/> />
); )
}); })
const ButtonSpinner = UIButton.Spinner; const ButtonSpinner = UIButton.Spinner
type IButtonIcon = React.ComponentPropsWithoutRef<typeof UIButton.Icon> & type IButtonIcon = React.ComponentPropsWithoutRef<typeof UIButton.Icon>
VariantProps<typeof buttonIconStyle> & { & VariantProps<typeof buttonIconStyle> & {
className?: string | undefined; className?: string | undefined
as?: React.ElementType; as?: React.ElementType
height?: number; height?: number
width?: number; width?: number
}; }
const ButtonIcon = React.forwardRef< const ButtonIcon = React.forwardRef<
React.ElementRef<typeof UIButton.Icon>, React.ElementRef<typeof UIButton.Icon>,
@@ -353,7 +354,7 @@ const ButtonIcon = React.forwardRef<
variant: parentVariant, variant: parentVariant,
size: parentSize, size: parentSize,
action: parentAction, action: parentAction,
} = useStyleContext(SCOPE); } = useStyleContext(SCOPE)
if (typeof size === 'number') { if (typeof size === 'number') {
return ( return (
@@ -363,10 +364,11 @@ const ButtonIcon = React.forwardRef<
className={buttonIconStyle({ class: className })} className={buttonIconStyle({ class: className })}
size={size} size={size}
/> />
); )
} else if ( }
(props.height !== undefined || props.width !== undefined) && else if (
size === undefined (props.height !== undefined || props.width !== undefined)
&& size === undefined
) { ) {
return ( return (
<UIButton.Icon <UIButton.Icon
@@ -374,7 +376,7 @@ const ButtonIcon = React.forwardRef<
{...props} {...props}
className={buttonIconStyle({ class: className })} className={buttonIconStyle({ class: className })}
/> />
); )
} }
return ( return (
<UIButton.Icon <UIButton.Icon
@@ -390,11 +392,11 @@ const ButtonIcon = React.forwardRef<
})} })}
ref={ref} ref={ref}
/> />
); )
}); })
type IButtonGroupProps = React.ComponentPropsWithoutRef<typeof UIButton.Group> & type IButtonGroupProps = React.ComponentPropsWithoutRef<typeof UIButton.Group>
VariantProps<typeof buttonGroupStyle>; & VariantProps<typeof buttonGroupStyle>
const ButtonGroup = React.forwardRef< const ButtonGroup = React.forwardRef<
React.ElementRef<typeof UIButton.Group>, React.ElementRef<typeof UIButton.Group>,
@@ -408,7 +410,7 @@ const ButtonGroup = React.forwardRef<
flexDirection = 'column', flexDirection = 'column',
...props ...props
}, },
ref ref,
) => { ) => {
return ( return (
<UIButton.Group <UIButton.Group
@@ -421,14 +423,14 @@ const ButtonGroup = React.forwardRef<
{...props} {...props}
ref={ref} ref={ref}
/> />
); )
} },
); )
Button.displayName = 'Button'; Button.displayName = 'Button'
ButtonText.displayName = 'ButtonText'; ButtonText.displayName = 'ButtonText'
ButtonSpinner.displayName = 'ButtonSpinner'; ButtonSpinner.displayName = 'ButtonSpinner'
ButtonIcon.displayName = 'ButtonIcon'; ButtonIcon.displayName = 'ButtonIcon'
ButtonGroup.displayName = 'ButtonGroup'; ButtonGroup.displayName = 'ButtonGroup'
export { Button, ButtonText, ButtonSpinner, ButtonIcon, ButtonGroup }; export { Button, ButtonGroup, ButtonIcon, ButtonSpinner, ButtonText }
@@ -0,0 +1 @@
{"v":"5.0.3","fr":60,"ip":0,"op":481,"w":1920,"h":1080,"nm":"08 - 404 Page-2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"astronaut","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[6]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":240,"s":[6],"e":[0]},{"t":480}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[1053.917,479.903,0],"e":[1004.917,482.903,0],"to":[-8.16666698455811,0.5,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":240,"s":[1004.917,482.903,0],"e":[1053.917,479.903,0],"to":[0,0,0],"ti":[-8.16666698455811,0.5,0]},{"t":480}],"ix":2},"a":{"a":0,"k":[238.431,194.157,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.695,-0.123],[0.208,-1.775],[-8.528,-22.143],[-16.702,-14.602],[-1.408,1.101],[11.447,29.719],[28.36,-0.002]],"o":[[-1.783,0.13],[-2.59,22.033],[8.528,22.142],[1.345,1.177],[23.868,-18.628],[-10.804,-28.052],[-1.688,0]],"v":[[-38.22,-63.515],[-41.631,-60.213],[-33.12,6.934],[5.611,62.44],[10.354,62.6],[32.773,-18.445],[-33.138,-63.699]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"g":{"p":3,"k":{"a":0,"k":[0,1,0.4431,0,0.5,0.1972,0.3055,0.3828,1,0.0306,0.0999,0.1494,0,1,0.5,0.995,1,0.99],"ix":9}},"s":{"a":0,"k":[80,-37],"ix":5},"e":{"a":0,"k":[-23.5,9],"ix":6},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[322.001,69.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"visor","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-13.398,-34.788],[34.788,-13.398],[13.4,34.788],[-34.788,13.399]],"o":[[13.399,34.788],[-34.788,13.399],[-13.398,-34.788],[34.788,-13.399]],"v":[[62.989,-24.261],[24.261,62.989],[-62.99,24.261],[-24.261,-62.989]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[288.878,76.638],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"helmet","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[264.015,127.254],"ix":2},"a":{"a":0,"k":[264.015,127.254],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[-6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":240,"s":[-6],"e":[0]},{"t":480}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"helmet","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p833_1_0p167_0p167","t":0,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2.649,9.747],[8.886,-1.547]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-6.153,4.911],[6.153,-4.911]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-6.153,4.911],[6.153,-4.911]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.097,13.536],[11.028,1.089]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":180,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.097,13.536],[11.028,1.089]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-6.153,4.911],[6.153,-4.911]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":300,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-6.153,4.911],[6.153,-4.911]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.097,13.536],[11.028,1.089]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":420,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.097,13.536],[11.028,1.089]],"c":false}],"e":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,Line truncated
+31
View File
@@ -670,6 +670,36 @@ export const ZhaoPinIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ..
## 集成 [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native)
安装依赖:
```bash
npx expo install lottie-react-native
```
使用案例:
```tsx
import React from "react";
import LottieView from "lottie-react-native";
export default function Animation() {
return (
<LottieView
source={require("../path/to/animation.json")}
style={{width: "100%", height: "100%"}}
autoPlay
loop
/>
);
}
```
lottie例子网站:https://lottiefiles.com/free-animations
## 配置深度链接 ## 配置深度链接
作用:通过链接就可以跳转到该app。 作用:通过链接就可以跳转到该app。
@@ -1119,3 +1149,4 @@ npx expo add react-native-worklets
​