comi-logic/expo-popcore-app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug

Browse Source
This commit is contained in:
imeepos
2026-01-28 17:30:01 +08:00
parent 0399bba83f
commit d6cc74ab00
11 changed files with 439 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
components/drawer/EditProfileDrawer.tsx
View File

@@ -4,21 +4,19 @@ import {
Text,
StyleSheet,
Pressable,
TextInput,
Dimensions,
Platform,
Keyboard,
ScrollView,
ActivityIndicator,
} from 'react-native'
import { Image } from 'expo-image'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTranslation } from 'react-i18next'
import BottomSheet, { BottomSheetModal, BottomSheetView, BottomSheetBackdrop, BottomSheetScrollView } from '@gorhom/bottom-sheet'
import { BottomSheetModal, BottomSheetBackdrop, BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet'
import { CloseIcon, AvatarUploadIcon } from '@/components/icon'
import { LinearGradient } from 'expo-linear-gradient'
import { type ImagePickerAsset } from 'expo-image-picker'
import { useUpdateProfile } from '@/hooks'
import { KeyboardAwareScrollView, useKeyboardContext, useKeyboardState } from 'react-native-keyboard-controller'
import { TextInput } from 'react-native-gesture-handler'
interface EditProfileDrawerProps {
@@ -41,13 +39,14 @@ export default function EditProfileDrawer({
const [name, setName] = useState(initialName)
const [avatar, setAvatar] = useState<string | undefined>(initialAvatar)
const [selectedImage, setSelectedImage] = useState<ImagePickerAsset | null>(null)
const insets = useSafeAreaInsets()
const keyboardState = useKeyboardState()
const { loading, pickImage, updateProfile } = useUpdateProfile()
// 增加高度以避免被底部 Tab 栏遮挡，考虑底部安全区域
// 使用百分比让 BottomSheet 在键盘弹出时能够自动调整
const snapPoints = useMemo(() => ['50%'], [])
const snapPoints = useMemo(() => ['80%'], [])
useEffect(() => {
if (visible) {
@@ -56,11 +55,21 @@ export default function EditProfileDrawer({
setName(initialName)
setAvatar(initialAvatar)
setSelectedImage(null)
} else {
bottomSheetRef.current?.dismiss()
}
}, [visible, initialName, initialAvatar])
useEffect(() => {
if (keyboardState && keyboardState.height) {
bottomSheetRef.current?.expand()
} else {
bottomSheetRef.current?.collapse()
}
}, [keyboardState])
const handleSheetChanges = useCallback((index: number) => {
if (index === -1) {
onClose()
@@ -132,48 +141,42 @@ export default function EditProfileDrawer({
keyboardBlurBehavior="restore"
android_keyboardInputMode="adjustResize"
>
<BottomSheetScrollView
style={styles.scrollView}
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
>
<View style={styles.container}>
{/* 顶部关闭按钮 */}
<Pressable
style={styles.closeButton}
onPress={handleClose}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
disabled={loading}
>
<CloseIcon />
</Pressable>
{/* 头像区域 */}
<View style={styles.avatarContainer}>
<View style={styles.avatarWrapper}>
<Image
source={avatar ? { uri: avatar } : require('@/assets/images/icon.png')}
style={styles.avatar}
contentFit="cover"
/>
<Pressable
style={styles.cameraButton}
onPress={handleAvatarPress}
disabled={loading}
>
<View style={styles.cameraIconContainer}>
{loading ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<AvatarUploadIcon />
)}
</View>
</Pressable>
</View>
<BottomSheetView style={styles.container}>
{/* 顶部关闭按钮 */}
<Pressable
style={styles.closeButton}
onPress={handleClose}
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
disabled={loading}
>
<CloseIcon />
</Pressable>
{/* 头像区域 */}
<View style={styles.avatarContainer}>
<View style={styles.avatarWrapper}>
<Image
source={avatar ? { uri: avatar } : require('@/assets/images/icon.png')}
style={styles.avatar}
contentFit="cover"
/>
<Pressable
style={styles.cameraButton}
onPress={handleAvatarPress}
disabled={loading}
>
<View style={styles.cameraIconContainer}>
{loading ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<AvatarUploadIcon />
)}
</View>
</Pressable>
</View>
</View>
{/* 输入框 */}
<TextInput
{/* 输入框 */}
{/* <BottomSheetTextInput
style={styles.input}
value={name}
onChangeText={setName}
@@ -181,32 +184,40 @@ export default function EditProfileDrawer({
placeholderTextColor="#666666"
returnKeyType="done"
onSubmitEditing={handleSave}
blurOnSubmit={true}
editable={!loading}
/>
/> */}
{/* 保存按钮 */}
<Pressable
style={[styles.saveButtonContainer, loading && styles.saveButtonDisabled]}
onPress={handleSave}
disabled={loading || !name.trim()}
android_ripple={{ color: 'rgba(255, 255, 255, 0.1)' }}
<TextInput style={styles.input}
value={name}
onChangeText={setName}
placeholder={t('editProfile.namePlaceholder')}
placeholderTextColor="#666666"
returnKeyType="done"
onSubmitEditing={handleSave}
editable={!loading}></TextInput>
{/* 保存按钮 */}
<Pressable
style={[styles.saveButtonContainer, loading && styles.saveButtonDisabled]}
onPress={handleSave}
disabled={loading || !name.trim()}
android_ripple={{ color: 'rgba(255, 255, 255, 0.1)' }}
>
<LinearGradient
colors={['#9966FF', '#FF6699', '#FF9966']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.saveButton}
>
<LinearGradient
colors={['#9966FF', '#FF6699', '#FF9966']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.saveButton}
>
{loading ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<Text style={styles.saveButtonText}>{t('editProfile.save')}</Text>
)}
</LinearGradient>
</Pressable>
</View>
</BottomSheetScrollView>
{loading ? (
<ActivityIndicator size="small" color="#FFFFFF" />
) : (
<Text style={styles.saveButtonText}>{t('editProfile.save')}</Text>
)}
</LinearGradient>
</Pressable>
</BottomSheetView>
</BottomSheetModal>
)
}
@@ -222,15 +233,8 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: '#1C1E22',
paddingHorizontal: 16,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingTop: 32,
paddingBottom: Platform.OS === 'ios' ? 25 : 17,
paddingHorizontal: 0,
flexGrow: 1,
},
closeButton: {
position: 'absolute',