首页 > 解决方案 > React Native Keyboard.dismiss() 无法正常工作

问题描述

出于某种原因, Keyboard.dismiss() 非常容易出错和随机。我正在做一些非常基本的事情。在我的代码中有两种不同的场景调用 Keyboard.dismiss() 。

  1. 如果用户滚动列表
  2. 如果他们按 Post

两者都暂时关闭了键盘,但随后又弹回了..每隔一段时间它就不会弹起来,但大多数时候它会弹起来。这只发生在安卓上。我在这里缺少什么吗?我什至尝试模糊输入,但结果相同。

import React, { useCallback, useState, useEffect, useRef } from 'react'
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    Keyboard,
    KeyboardAvoidingView,
    TextInput,
    Pressable,
} from 'react-native'

    const inputRef = useRef()

    const onScrollBeginDrag = useCallback(() => {
            inputRef.current.blur()
            Keyboard.dismiss()
    }, [inputRef])

    return (
        <ScreenWrapper paddingBottom>
            <HeaderBasic
                header="Comments"
                goBack={goBack}
                headerColor={{ color: colors.darkestColorP1 }}
            />

            <BigList
                data={listData}
                renderItem={render}
                keyExtractor={keyExtractor}
                itemHeight={90}
                getItemLayout={layOut}
                style={styles.bigList}
                showsVerticalScrollIndicator={true}
                onScrollBeginDrag={onScrollBeginDrag}
            />

            <KeyboardAvoidingView
                behavior="padding"
                enabled={isIOS ? true : false}
            >
                <View style={styles.cellOuter}>
                    <View style={styles.imageCont}></View>
                    <View style={styles.inputWrapper}>
                        <TextInput
                            ref={inputRef}
                            maxFontSizeMultiplier={colors.maxFontSizeMultiplier}
                            style={styles.input}
                            multiline
                            blurOnSubmit={true}
                            // onBlur={() => inputRef.current.blur()}
                        />
                        <Text style={styles.postFaker}>Post</Text>
                        <Pressable
                            onPress={() => {
                                Keyboard.dismiss()
                            }}
                            style={styles.pressable}
                        >
                            <Text style={styles.post}>Post</Text>
                        </Pressable>
                    </View>
                </View>
            </KeyboardAvoidingView>
        </ScreenWrapper>
    )
}

在此处输入图像描述

标签: javascriptandroidreact-native

解决方案


keyboardDidShowCalled = () => {
this.setState({
  siteNameModelBottomMargin: this.state.device === "tablet" ? 300 : 150,
  keyboardShown: true
});};
keyboardHideShowCalled = () => {
this.setState({
  siteNameModelBottomMargin: 0,
  keyboardShown: false
});

使用上面给出的这些方法并导入下面提到的语句,并在代码中需要的地方调用这些方法。这可能会对您有所帮助。谢谢!

从“react-native-device-info”导入 DeviceInfo;


推荐阅读