簡體   English   中英

React Native Keyboard.dismiss() 無法正常工作

[英]React Native Keyboard.dismiss() not working correctly

出於某種原因,Keyboard.dismiss() 非常有問題和隨機。 我正在做一些非常基本的事情。 在我的代碼中有兩種不同的調用 Keyboard.dismiss() 的場景。

  1. 如果用戶滾動列表
  2. 如果他們按 Post

兩者都暫時關閉了鍵盤,但隨后又彈回了.. 每隔一段時間它不會彈起,但大部分時間都會彈起。 這只發生在android上。 有什么我在這里想念的嗎? 我什至嘗試模糊輸入,但結果相同。

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>
    )
}

在此處輸入圖片說明

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

使用上面給出的這些方法並導入下面提到的語句並在代碼中需要的地方調用這些方法。 這可能對你有幫助。 謝謝!

從“react-native-device-info”導入設備信息;

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM