oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-10-29 22:40:19 +08:00
1 parent 8e8ab25726
commit 2aa2b513eb
10 files changed
+245 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/app/base-app/package.json
+1
View File
@@ -25,6 +25,7 @@
"nativewind": "^4.2.1",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-curved-bottom-bar": "^3.5.1",
"react-native-reanimated": "~3.17.5",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.16.0",
code/app/base-app/pnpm-lock.yaml
Generated
+46
View File
@@ -53,6 +53,9 @@ importers:
react-native:
specifier: 0.81.5
version: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
react-native-curved-bottom-bar:
specifier: ^3.5.1
version: 3.5.1(@react-navigation/bottom-tabs@7.5.0(@react-navigation/native@7.1.18(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@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)
react-native-reanimated:
specifier: ~3.17.5
version: 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)
@@ -2505,6 +2508,14 @@ packages:
csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
d3-path@3.1.0:
resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
engines: {node: '>=12'}
d3-shape@3.2.0:
resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
engines: {node: '>=12'}
debug@2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
peerDependencies:
@@ -4356,6 +4367,15 @@ packages:
react-native-svg:
optional: true
react-native-curved-bottom-bar@3.5.1:
resolution: {integrity: sha512-WG7ZTs+JYXCmGrnXzsYB12DD/UvVdSC4pgem7X5BxXR/bnSgPEHMc0lmGhuRoPS7WgH75w8kncUJFDcwlA75fQ==}
engines: {node: '>= 16.0.0'}
peerDependencies:
'@react-navigation/bottom-tabs': '*'
react: '*'
react-native: '*'
react-native-svg: '*'
react-native-is-edge-to-edge@1.1.7:
resolution: {integrity: sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w==}
peerDependencies:
@@ -4387,6 +4407,12 @@ packages:
react: '*'
react-native: '*'
react-native-size-scaling@0.5.4:
resolution: {integrity: sha512-GtoE7qcw4ftOigtq6hRTV34nosGw9z6WXNq2l06Uj+yFfvrz6teGjD/E22Jo4raegdTIQmPcMU4/nRRhRLZpAA==}
peerDependencies:
react: '*'
react-native: '*'
react-native-svg@15.12.1:
resolution: {integrity: sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==}
peerDependencies:
@@ -8530,6 +8556,12 @@ snapshots:
csstype@3.1.3: {}
d3-path@3.1.0: {}
d3-shape@3.2.0:
dependencies:
d3-path: 3.1.0
debug@2.6.9:
dependencies:
ms: 2.0.0
@@ -10822,6 +10854,15 @@ snapshots:
transitivePeerDependencies:
- supports-color
react-native-curved-bottom-bar@3.5.1(@react-navigation/bottom-tabs@7.5.0(@react-navigation/native@7.1.18(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@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):
dependencies:
'@react-navigation/bottom-tabs': 7.5.0(@react-navigation/native@7.1.18(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@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
d3-shape: 3.2.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-native-size-scaling: 0.5.4(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-is-edge-to-edge@1.1.7(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
@@ -10865,6 +10906,11 @@ snapshots:
react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
warn-once: 0.1.1
react-native-size-scaling@0.5.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)
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):
dependencies:
css-select: 5.2.2
code/app/base-app/src/app/(tabs)/_layout.tsx
+63 -16
View File
@@ -1,23 +1,70 @@
import FontAwesome from '@expo/vector-icons/FontAwesome'
import { Tabs } from 'expo-router'
import { CircleDollarSign, CircleUserRound, Heart, Layers, MessageSquare } from 'lucide-react-native'
import React, { useRef } from 'react'
import { Animated, Pressable, View } from 'react-native'
const tabItems = [
{ name: 'finance', icon: <CircleDollarSign strokeWidth={1.5} size={24} /> },
{ name: 'dating', icon: <Heart strokeWidth={1.5} size={24} /> },
{ name: 'app-center', icon: <Layers strokeWidth={1.5} size={24} /> },
{ name: 'chat', icon: <MessageSquare strokeWidth={1.5} size={24} /> },
{ name: 'profile', icon: <CircleUserRound strokeWidth={1.5} size={24} /> },
]
// 自定义 TabBar
function CustomTabBar({ state, descriptors, navigation }: any) {
const scales = useRef(tabItems.map(() => new Animated.Value(1))).current
return (
<View className="flex-row justify-around bg-white border-t border-gray-200 py-2">
{state.routes.map((route: any, index: number) => {
const item = tabItems.find(i => i.name === route.name)
if (!item)
return null
const isFocused = state.index === index
const color = isFocused ? '#333333' : '#9ca3af'
const onPressIn = () =>
Animated.spring(scales[index], { toValue: 0.8, useNativeDriver: true }).start()
const onPressOut = () =>
Animated.spring(scales[index], { toValue: 1, useNativeDriver: true }).start()
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
})
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name)
}
}
return (
<Pressable
key={route.key}
onPress={onPress}
onPressIn={onPressIn}
onPressOut={onPressOut}
className="flex-1 items-center justify-center"
>
<Animated.View style={{ transform: [{ scale: scales[index] }] }} className="items-center p-2">
{React.cloneElement(item.icon, { color })}
</Animated.View>
</Pressable>
)
})}
</View>
)
}
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 screenOptions={{ headerShown: false, tabBarShowLabel: false }} tabBar={props => <CustomTabBar {...props} />}>
{tabItems.map(item => (
<Tabs.Screen key={item.name} name={item.name} options={{ tabBarIcon: () => null }} />
))}
</Tabs>
)
}
code/app/base-app/src/app/(tabs)/index.tsx → code/app/base-app/src/app/(tabs)/app-center.tsx
View File
File renamed without changes.
code/app/base-app/src/app/(tabs)/chat.tsx
+17
View File
@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native'
export default function Tab() {
return (
<View style={styles.container}>
<Text>Chat [Settings]</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
code/app/base-app/src/app/(tabs)/dating.tsx
+17
View File
@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native'
export default function Tab() {
return (
<View style={styles.container}>
<Text>heart [Settings]</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
code/app/base-app/src/app/(tabs)/finance.tsx
+17
View File
@@ -0,0 +1,17 @@
import { StyleSheet, Text, View } from 'react-native'
export default function Tab() {
return (
<View style={styles.container}>
<Text>Tab [Credit]</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
code/app/base-app/src/app/(tabs)/settings.tsx → code/app/base-app/src/app/(tabs)/profile.tsx
View File
File renamed without changes.
code/app/base-app/src/app/_layout.tsx
-2
View File
@@ -5,9 +5,7 @@ import * as SplashScreen from 'expo-splash-screen'
import { StatusBar } from 'expo-status-bar'
import { RefreshCw } from 'lucide-react-native'
import { useEffect } from 'react'
import { Image, ScrollView, Text, View } from 'react-native'
import { EmptyState } from '@/components/empty-status'
import { Button, ButtonIcon, ButtonText } from '@/components/ui/button'
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
import '@/styles/global.css'
code/app/base-app/test.html
+84
View File
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curved TabBar</title>
<style>
body {
margin: 0;
padding: 0;
background: #f5f5f5;
}
/* TabBar 容器 */
.tabbar-container {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: flex-end;
z-index: 10;
}
/* TabBar 背景弧形 */
.tabbar-bg {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: white;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}
/* Tab 按钮 */
.tab-item {
flex: 1;
text-align: center;
line-height: 60px;
font-size: 24px;
color: #9ca3af;
transition: transform 0.2s;
position: relative;
z-index: 20;
}
.tab-item.active {
color: #333333;
}
.tab-item:hover {
transform: scale(1.2);
}
/* 中间凸起按钮 */
.tab-item.center {
width: 70px;
height: 70px;
background: #4f46e5;
border-radius: 50%;
color: white;
line-height: 70px;
margin-top: -20px; /* 嵌入凹槽 */
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-size: 28px;
}
</style>
</head>
<body>
<div class="tabbar-container">
<div class="tabbar-bg"></div>
<div class="tab-item">💰</div>
<div class="tab-item">❤️</div>
<div class="tab-item center">🗂</div>
<div class="tab-item">💬</div>
<div class="tab-item">👤</div>
</div>
</body>
</html>