去掉标题键盘上移
This commit is contained in:
@@ -13,6 +13,8 @@ interface TextareaTagProps {
|
||||
placeholder?: string
|
||||
maxLength?: number
|
||||
options?: { label: string; value: any }[] | null
|
||||
onFocus?: () => void
|
||||
onBlur?: () => void
|
||||
}
|
||||
|
||||
const TextareaTag: React.FC<TextareaTagProps> = ({
|
||||
@@ -20,7 +22,9 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
|
||||
onChange,
|
||||
placeholder = '请输入',
|
||||
maxLength = 1000,
|
||||
options = []
|
||||
options = [],
|
||||
onFocus,
|
||||
onBlur
|
||||
}) => {
|
||||
// 处理文本输入变化
|
||||
const handleTextChange = useCallback((e: any) => {
|
||||
@@ -69,6 +73,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
|
||||
onInput={handleTextChange}
|
||||
maxlength={maxLength}
|
||||
autoHeight={false}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -8,13 +8,17 @@ interface TitleTextareaProps {
|
||||
onChange: (value: string) => void
|
||||
maxLength?: number
|
||||
placeholder?: string
|
||||
onFocus?: () => void
|
||||
onBlur?: () => void
|
||||
}
|
||||
|
||||
const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
||||
value='',
|
||||
onChange,
|
||||
maxLength = 20,
|
||||
placeholder = '好的标题更吸引人哦'
|
||||
placeholder = '好的标题更吸引人哦',
|
||||
onFocus,
|
||||
onBlur
|
||||
}) => {
|
||||
return (
|
||||
<View className='title-input-wrapper'>
|
||||
@@ -26,6 +30,8 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
|
||||
maxlength={maxLength}
|
||||
autoSize={true}
|
||||
placeholderClass='title-input-placeholder'
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
<View className='char-count'>{value.length}/{maxLength}</View>
|
||||
</View>
|
||||
|
||||
@@ -269,7 +269,7 @@
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
z-index: 99 !important;
|
||||
width: 100% !important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
@@ -75,7 +75,8 @@ const PublishBall: React.FC = () => {
|
||||
const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData])
|
||||
const [checked, setChecked] = useState(true)
|
||||
const [titleBar, setTitleBar] = useState('发布')
|
||||
const scrollViewRef = useRef<any>(null)
|
||||
// 控制是否响应全局键盘(由具体输入框 focus/blur 控制)
|
||||
const [shouldReactToKeyboard, setShouldReactToKeyboard] = useState(false)
|
||||
|
||||
// 删除确认弹窗状态
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<{
|
||||
@@ -580,7 +581,7 @@ useEffect(() => {
|
||||
// 添加本地监听器
|
||||
const removeListener = addListener((height, visible) => {
|
||||
console.log('PublishBall 收到键盘变化:', height, visible)
|
||||
|
||||
// 这里只记录或用于其他逻辑,布局是否响应交由 shouldReactToKeyboard 决定
|
||||
})
|
||||
|
||||
return () => {
|
||||
@@ -588,10 +589,18 @@ useEffect(() => {
|
||||
}
|
||||
}, [initializeKeyboardListener, addListener])
|
||||
|
||||
console.log(isKeyboardVisible, 'isKeyboardVisible');
|
||||
console.log(keyboardHeight, 'keyboardHeight');
|
||||
const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
|
||||
const { prop } = item
|
||||
if (prop === 'title') {
|
||||
return
|
||||
}
|
||||
setShouldReactToKeyboard(true)
|
||||
}
|
||||
const handleAnyInputBlur = (item: FormFieldConfig, e: any) => {
|
||||
setShouldReactToKeyboard(false)
|
||||
}
|
||||
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']} />
|
||||
<View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}>
|
||||
{/* 活动类型切换 */}
|
||||
@@ -636,6 +645,8 @@ useEffect(() => {
|
||||
formData={item}
|
||||
onChange={(key, value) => updateFormData(key, value, index)}
|
||||
optionsConfig={optionsConfig}
|
||||
onAnyInputFocus={handleAnyInputFocus}
|
||||
onAnyInputBlur={handleAnyInputBlur}
|
||||
/>
|
||||
</View>
|
||||
))
|
||||
|
||||
@@ -25,7 +25,10 @@ const componentMap = {
|
||||
const PublishForm: React.FC<{
|
||||
formData: PublishBallFormData,
|
||||
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[]>([])
|
||||
|
||||
// 字典数据相关
|
||||
@@ -214,13 +217,23 @@ const PublishForm: React.FC<{
|
||||
</View>
|
||||
}
|
||||
<View className={styles['bg-section']}>
|
||||
<Component
|
||||
{(() => {
|
||||
const shouldAttachFocus = [FieldType.TEXT, FieldType.TEXTAREATAG].includes(item.type)
|
||||
const focusProps = shouldAttachFocus ? {
|
||||
onFocus: (e) => onAnyInputFocus?.(item, e),
|
||||
onBlur: (e) => onAnyInputBlur?.(item, e)
|
||||
} : {}
|
||||
return (
|
||||
<Component
|
||||
label={item.label}
|
||||
value={formData[item.prop]}
|
||||
onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)}
|
||||
{...optionProps}
|
||||
placeholder={item.placeholder}
|
||||
/>
|
||||
{...(focusProps as any)}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user