React Native Keyboard.dismiss() 无法正常工作答案

【问题标题】：React Native Keyboard.dismiss() not working correctlyReact Native Keyboard.dismiss() 无法正常工作
【发布时间】：2021-07-16 22:50:16
【问题描述】：

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

如果用户滚动列表
如果他们按 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>
    )
}

【问题讨论】：

标签： javascript android react-native

【解决方案1】：

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

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

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

【讨论】：