去掉标题键盘上移

This commit is contained in:
筱野
2025-10-10 21:57:09 +08:00
parent 687f685e28
commit 1140adf33e
5 changed files with 47 additions and 11 deletions

View File

@@ -13,6 +13,8 @@ interface TextareaTagProps {
placeholder?: string placeholder?: string
maxLength?: number maxLength?: number
options?: { label: string; value: any }[] | null options?: { label: string; value: any }[] | null
onFocus?: () => void
onBlur?: () => void
} }
const TextareaTag: React.FC<TextareaTagProps> = ({ const TextareaTag: React.FC<TextareaTagProps> = ({
@@ -20,7 +22,9 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
onChange, onChange,
placeholder = '请输入', placeholder = '请输入',
maxLength = 1000, maxLength = 1000,
options = [] options = [],
onFocus,
onBlur
}) => { }) => {
// 处理文本输入变化 // 处理文本输入变化
const handleTextChange = useCallback((e: any) => { const handleTextChange = useCallback((e: any) => {
@@ -69,6 +73,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
onInput={handleTextChange} onInput={handleTextChange}
maxlength={maxLength} maxlength={maxLength}
autoHeight={false} autoHeight={false}
onFocus={onFocus}
onBlur={onBlur}
/> />
</View> </View>

View File

@@ -8,13 +8,17 @@ interface TitleTextareaProps {
onChange: (value: string) => void onChange: (value: string) => void
maxLength?: number maxLength?: number
placeholder?: string placeholder?: string
onFocus?: () => void
onBlur?: () => void
} }
const TitleTextarea: React.FC<TitleTextareaProps> = ({ const TitleTextarea: React.FC<TitleTextareaProps> = ({
value='', value='',
onChange, onChange,
maxLength = 20, maxLength = 20,
placeholder = '好的标题更吸引人哦' placeholder = '好的标题更吸引人哦',
onFocus,
onBlur
}) => { }) => {
return ( return (
<View className='title-input-wrapper'> <View className='title-input-wrapper'>
@@ -26,6 +30,8 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
maxlength={maxLength} maxlength={maxLength}
autoSize={true} autoSize={true}
placeholderClass='title-input-placeholder' placeholderClass='title-input-placeholder'
onFocus={onFocus}
onBlur={onBlur}
/> />
<View className='char-count'>{value.length}/{maxLength}</View> <View className='char-count'>{value.length}/{maxLength}</View>
</View> </View>

View File

@@ -269,7 +269,7 @@
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
left: 0 !important; left: 0 !important;
z-index: 9999 !important; z-index: 99 !important;
width: 100% !important; width: 100% !important;
box-shadow: none!important; box-shadow: none!important;
} }

View File

@@ -75,7 +75,8 @@ const PublishBall: React.FC = () => {
const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData]) const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData])
const [checked, setChecked] = useState(true) const [checked, setChecked] = useState(true)
const [titleBar, setTitleBar] = useState('发布') const [titleBar, setTitleBar] = useState('发布')
const scrollViewRef = useRef<any>(null) // 控制是否响应全局键盘(由具体输入框 focus/blur 控制)
const [shouldReactToKeyboard, setShouldReactToKeyboard] = useState(false)
// 删除确认弹窗状态 // 删除确认弹窗状态
const [deleteConfirm, setDeleteConfirm] = useState<{ const [deleteConfirm, setDeleteConfirm] = useState<{
@@ -580,7 +581,7 @@ useEffect(() => {
// 添加本地监听器 // 添加本地监听器
const removeListener = addListener((height, visible) => { const removeListener = addListener((height, visible) => {
console.log('PublishBall 收到键盘变化:', height, visible) console.log('PublishBall 收到键盘变化:', height, visible)
// 这里只记录或用于其他逻辑,布局是否响应交由 shouldReactToKeyboard 决定
}) })
return () => { return () => {
@@ -588,10 +589,18 @@ useEffect(() => {
} }
}, [initializeKeyboardListener, addListener]) }, [initializeKeyboardListener, addListener])
console.log(isKeyboardVisible, 'isKeyboardVisible'); const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
console.log(keyboardHeight, 'keyboardHeight'); const { prop } = item
if (prop === 'title') {
return
}
setShouldReactToKeyboard(true)
}
const handleAnyInputBlur = (item: FormFieldConfig, e: any) => {
setShouldReactToKeyboard(false)
}
return ( return (
<View className={`${styles['publish-ball-container']} ${isKeyboardVisible ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible ? `${keyboardHeight - 124}px` : 0 }}> <View className={`${styles['publish-ball-container']} ${isKeyboardVisible && shouldReactToKeyboard ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible && shouldReactToKeyboard ? `${keyboardHeight - 124}px` : 0 }}>
<GeneralNavbar title={titleBar} backgroundColor="#FAFAFA" className={styles['publish-ball-navbar']} /> <GeneralNavbar title={titleBar} backgroundColor="#FAFAFA" className={styles['publish-ball-navbar']} />
<View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}> <View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}>
{/* 活动类型切换 */} {/* 活动类型切换 */}
@@ -636,6 +645,8 @@ useEffect(() => {
formData={item} formData={item}
onChange={(key, value) => updateFormData(key, value, index)} onChange={(key, value) => updateFormData(key, value, index)}
optionsConfig={optionsConfig} optionsConfig={optionsConfig}
onAnyInputFocus={handleAnyInputFocus}
onAnyInputBlur={handleAnyInputBlur}
/> />
</View> </View>
)) ))

View File

@@ -25,7 +25,10 @@ const componentMap = {
const PublishForm: React.FC<{ const PublishForm: React.FC<{
formData: PublishBallFormData, formData: PublishBallFormData,
onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void, onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void,
optionsConfig: FormFieldConfig[] }> = ({ formData, onChange, optionsConfig }) => { optionsConfig: FormFieldConfig[],
onAnyInputFocus?: (item: FormFieldConfig, e: any) => void,
onAnyInputBlur?: (item: FormFieldConfig, e: any) => void,
}> = ({ formData, onChange, optionsConfig, onAnyInputFocus, onAnyInputBlur }) => {
const [coverImages, setCoverImages] = useState<CoverImage[]>([]) const [coverImages, setCoverImages] = useState<CoverImage[]>([])
// 字典数据相关 // 字典数据相关
@@ -214,13 +217,23 @@ const PublishForm: React.FC<{
</View> </View>
} }
<View className={styles['bg-section']}> <View className={styles['bg-section']}>
{(() => {
const shouldAttachFocus = [FieldType.TEXT, FieldType.TEXTAREATAG].includes(item.type)
const focusProps = shouldAttachFocus ? {
onFocus: (e) => onAnyInputFocus?.(item, e),
onBlur: (e) => onAnyInputBlur?.(item, e)
} : {}
return (
<Component <Component
label={item.label} label={item.label}
value={formData[item.prop]} value={formData[item.prop]}
onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)} onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)}
{...optionProps} {...optionProps}
placeholder={item.placeholder} placeholder={item.placeholder}
{...(focusProps as any)}
/> />
)
})()}
</View> </View>
</View> </View>
) )