From a52e73fbbad2a99dda1ede9a8a53f0f0341ef0e4 Mon Sep 17 00:00:00 2001 From: ZhangAo Date: Thu, 13 Nov 2025 17:29:44 +0800 Subject: [PATCH] u --- code/base-project/base-app/app.json | 3 +- code/base-project/base-app/package.json | 4 +- .../base-app/src/app/(tabs)/chat.tsx | 79 ++++++--- .../app/(tabs)/components/BottomSection.tsx | 50 ++++++ .../app/(tabs)/money/components/AddDrawer.tsx | 158 +++++++++--------- .../base-project/base-app/src/app/_layout.tsx | 65 +++---- .../src/components/common/ao/Input.tsx | 2 +- .../base-app/src/hooks/useKeyboardHeight.ts | 31 ++++ .../base-app/src/request/index.ts | 4 +- 9 files changed, 255 insertions(+), 141 deletions(-) create mode 100644 code/base-project/base-app/src/app/(tabs)/components/BottomSection.tsx create mode 100644 code/base-project/base-app/src/hooks/useKeyboardHeight.ts diff --git a/code/base-project/base-app/app.json b/code/base-project/base-app/app.json index 5efc9f45..3b251446 100644 --- a/code/base-project/base-app/app.json +++ b/code/base-project/base-app/app.json @@ -22,7 +22,8 @@ "backgroundColor": "#ffffff" }, "edgeToEdgeEnabled": true, - "predictiveBackGestureEnabled": false + "predictiveBackGestureEnabled": false, + "package": "com.oneao.baseapp" }, "web": { "favicon": "./assets/favicon.png" diff --git a/code/base-project/base-app/package.json b/code/base-project/base-app/package.json index 2d98ece4..52fe99a4 100644 --- a/code/base-project/base-app/package.json +++ b/code/base-project/base-app/package.json @@ -5,8 +5,8 @@ "main": "expo-router/entry", "scripts": { "start": "expo start", - "android": "expo start --android", - "ios": "expo start --ios", + "android": "expo run:android", + "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { diff --git a/code/base-project/base-app/src/app/(tabs)/chat.tsx b/code/base-project/base-app/src/app/(tabs)/chat.tsx index 06b86c1b..9177fb38 100644 --- a/code/base-project/base-app/src/app/(tabs)/chat.tsx +++ b/code/base-project/base-app/src/app/(tabs)/chat.tsx @@ -1,39 +1,68 @@ -import React, { useState } from 'react' -import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native' -import { KeyboardProvider } from 'react-native-keyboard-controller' -import { AInput } from '@/components/common/ao' +import React from 'react' +import { + StyleSheet, + Text, + TextInput, + TouchableOpacity, + View, +} from 'react-native' +import { KeyboardAvoidingView } from 'react-native-keyboard-controller' -export default function MyInput() { +export default function KeyboardAvoidingViewExample() { return ( - - - - {/* 输入框 */} - - + + + Header + + + + + + Submit + - + ) } const styles = StyleSheet.create({ - container: { - flex: 1, - }, content: { + flex: 1, + maxHeight: 600, + }, + heading: { + fontSize: 36, + marginBottom: 48, + fontWeight: '600', + }, + inner: { + padding: 24, flex: 1, justifyContent: 'space-between', }, - topSpace: { - flex: 1, + textInput: { + height: 45, + borderColor: '#000000', + borderWidth: 1, + borderRadius: 10, + marginBottom: 36, + paddingLeft: 10, }, - inputWrapper: { - marginHorizontal: 16, - marginBottom: 20, + button: { + marginTop: 12, + height: 45, + borderRadius: 10, + backgroundColor: 'rgb(40, 64, 147)', + justifyContent: 'center', + alignItems: 'center', + }, + text: { + fontWeight: '500', + fontSize: 16, + color: 'white', }, }) diff --git a/code/base-project/base-app/src/app/(tabs)/components/BottomSection.tsx b/code/base-project/base-app/src/app/(tabs)/components/BottomSection.tsx new file mode 100644 index 00000000..61837280 --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/components/BottomSection.tsx @@ -0,0 +1,50 @@ +import type { KeyboardEvent } from 'react-native' +import React, { useEffect, useRef } from 'react' +import { Animated, Keyboard, Platform } from 'react-native' + +interface BottomSectionProps { + children: React.ReactNode + safeMargin?: number // 输入框距离键盘的安全距离 +} + +const BottomSection: React.FC = ({ children, safeMargin = 8 }) => { + const translateY = useRef(new Animated.Value(0)).current + + useEffect(() => { + const onKeyboardShow = (e: KeyboardEvent) => { + const keyboardHeight = e.endCoordinates.height + console.log(keyboardHeight) + Animated.timing(translateY, { + toValue: -(keyboardHeight - safeMargin), + duration: e.duration ?? 250, + useNativeDriver: true, + }).start() + } + + const onKeyboardHide = (e: KeyboardEvent) => { + Animated.timing(translateY, { + toValue: 0, + duration: e.duration ?? 250, + useNativeDriver: true, + }).start() + } + + const showSub = Keyboard.addListener( + Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', + onKeyboardShow, + ) + const hideSub = Keyboard.addListener( + Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', + onKeyboardHide, + ) + + return () => { + showSub.remove() + hideSub.remove() + } + }, [safeMargin]) + + return {children} +} + +export default BottomSection diff --git a/code/base-project/base-app/src/app/(tabs)/money/components/AddDrawer.tsx b/code/base-project/base-app/src/app/(tabs)/money/components/AddDrawer.tsx index 4642bf39..8b8699e3 100644 --- a/code/base-project/base-app/src/app/(tabs)/money/components/AddDrawer.tsx +++ b/code/base-project/base-app/src/app/(tabs)/money/components/AddDrawer.tsx @@ -1,9 +1,9 @@ import type { MoneyCategoryResult } from '@/request/api/money' import type { MoneyCategory } from '@/types/money' import Big from 'big.js' -import dayjs from 'dayjs' import { useEffect, useRef, useState } from 'react' -import { Keyboard, Pressable, StyleSheet, Text, View } from 'react-native' +import { Keyboard, Platform, Pressable, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native' +import { KeyboardProvider } from 'react-native-keyboard-controller' import { useSafeAreaInsets } from 'react-native-safe-area-context' import { AInput, LucideIcon } from '@/components/common/ao' import SegmentedTabs from '@/components/common/ao/SegmentedTabs' @@ -15,6 +15,7 @@ import { DrawerHeader, } from '@/components/ui/drawer' import { Grid, GridItem } from '@/components/ui/grid' +import { useKeyboardHeight } from '@/hooks/useKeyboardHeight' import { getMoneyCategoryApi } from '@/request/api/money' import MoneyCategoryIcon from './MoneyCategoryIcon' @@ -64,13 +65,13 @@ export default function AddMoneyDrawer({ const [showKeydown, setShowKeydown] = useState(false) const [keydownInput, setKeydownInput] = useState('') const [result, setResult] = useState('0') - const [date, setDate] = useState(dayjs()) const [categories, setCategories] = useState({ income: [], expense: [], }) - + const keyboardHeight = useKeyboardHeight() + console.log(keyboardHeight) function selectCategory(item: MoneyCategory) { setSelectedCategoryId(item.id) setShowKeydown(true) @@ -299,7 +300,6 @@ export default function AddMoneyDrawer({ }, []) return ( - + 取消 - {(() => { @@ -366,86 +366,86 @@ export default function AddMoneyDrawer({ {showKeydown && ( - - - - - - 2024/11/05 - - - {result} + + + + + + + 2024/11/05 + + + {result} + + + {keydownInput} + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + /> + + + {keys.map((item, idx) => { + const isFirstCol = idx % 4 === 0 + const isFirstRow = idx < 4 + const isLastCol = (idx + 1) % 4 === 0 + const isLastRow = idx >= 12 - {keydownInput} + return ( + handlePress(item.key)} + style={{ + width: '25%', + height: '25%', + justifyContent: 'center', + alignItems: 'center', + borderTopWidth: isFirstRow ? 0.3 : 0, + borderLeftWidth: isFirstCol ? 0.3 : 0, + borderRightWidth: !isLastCol ? 0.3 : 0, + borderBottomWidth: !isLastRow ? 0.3 : 0, + borderColor: '#ddd', + }} + > + {({ pressed }) => { + const defaultBg = item.key === '/' ? '#e6d7b8' : '#fff' + const pressedBg = item.key === '/' ? '#f5e9d4' : '#f2f2f2' - setIsFocused(true)} - onBlur={() => setIsFocused(false)} - /> + return ( + <> + + {item.content} + + ) + }} + + ) + })} - {!isFocused && ( - - - {keys.map((item, idx) => { - const isFirstCol = idx % 4 === 0 - const isFirstRow = idx < 4 - const isLastCol = (idx + 1) % 4 === 0 - const isLastRow = idx >= 12 - - return ( - handlePress(item.key)} - style={{ - width: '25%', - height: '25%', - justifyContent: 'center', - alignItems: 'center', - borderTopWidth: isFirstRow ? 0.3 : 0, - borderLeftWidth: isFirstCol ? 0.3 : 0, - borderRightWidth: !isLastCol ? 0.3 : 0, - borderBottomWidth: !isLastRow ? 0.3 : 0, - borderColor: '#ddd', - }} - > - {({ pressed }) => { - const defaultBg = item.key === '/' ? '#e6d7b8' : '#fff' - const pressedBg = item.key === '/' ? '#f5e9d4' : '#f2f2f2' - - return ( - <> - - {item.content} - - ) - }} - - ) - })} - + {/* {isFocused && ( + - )} - - + )} */} + )} + ) diff --git a/code/base-project/base-app/src/app/_layout.tsx b/code/base-project/base-app/src/app/_layout.tsx index d927b3da..754fda84 100644 --- a/code/base-project/base-app/src/app/_layout.tsx +++ b/code/base-project/base-app/src/app/_layout.tsx @@ -6,6 +6,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 { KeyboardProvider } from 'react-native-keyboard-controller' import EmptyState from '@/components/common/EmptyStatus' import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider' import { useUserStore } from '@/store/user' @@ -52,39 +53,41 @@ export default function RootLayout() { }, [fontsLoaded]) return ( - - - - - + + + + + > + - + - - - - - - + + + + + + + ) } diff --git a/code/base-project/base-app/src/components/common/ao/Input.tsx b/code/base-project/base-app/src/components/common/ao/Input.tsx index be17f37c..afa22600 100644 --- a/code/base-project/base-app/src/components/common/ao/Input.tsx +++ b/code/base-project/base-app/src/components/common/ao/Input.tsx @@ -55,7 +55,7 @@ const AInput = forwardRef, AInputProps>( )} diff --git a/code/base-project/base-app/src/hooks/useKeyboardHeight.ts b/code/base-project/base-app/src/hooks/useKeyboardHeight.ts new file mode 100644 index 00000000..c9a69e72 --- /dev/null +++ b/code/base-project/base-app/src/hooks/useKeyboardHeight.ts @@ -0,0 +1,31 @@ +import type { KeyboardEvent } from 'react-native' +import { useEffect, useState } from 'react' +import { Keyboard } from 'react-native' + +/** + * useKeyboardHeight - 获取键盘高度的 Hooks + * @returns {number} 当前键盘高度，键盘收起时为 0 + */ +export function useKeyboardHeight() { + const [keyboardHeight, setKeyboardHeight] = useState(0) + + useEffect(() => { + const onKeyboardShow = (e: KeyboardEvent) => { + setKeyboardHeight(e.endCoordinates.height) + } + + const onKeyboardHide = () => { + setKeyboardHeight(0) + } + + const showSub = Keyboard.addListener('keyboardDidShow', onKeyboardShow) + const hideSub = Keyboard.addListener('keyboardDidHide', onKeyboardHide) + + return () => { + showSub.remove() + hideSub.remove() + } + }, []) + + return keyboardHeight +} diff --git a/code/base-project/base-app/src/request/index.ts b/code/base-project/base-app/src/request/index.ts index 4085918d..6c068bd8 100644 --- a/code/base-project/base-app/src/request/index.ts +++ b/code/base-project/base-app/src/request/index.ts @@ -30,8 +30,8 @@ function isWhiteListed(url: string) { } const alovaInstance = createAlova({ - baseURL: 'http://192.168.5.6:8085/app', - // baseURL: 'http://192.168.1.136:8085/app', + // baseURL: 'http://192.168.5.6:8085/app', + baseURL: 'http://192.168.1.136:8085/app', requestAdapter: axiosRequestAdapter(), timeout: 5000, cacheFor: null,