在 React 本机键盘仅在 IOS 的模态上显示，在 android 中工作正常

Posted 2023-03-15

【中文标题】在 React 本机键盘仅在 IOS 的模态上显示，在 android 中工作正常

【英文标题】：In React native Keyboard shows on the Modal in IOS only ,Working fine in android

【发布时间】：2021-01-29 07:46:39

【问题描述】：

我正在使用 react-native-paper Modal。

我使用了 KeyboardAvoidingView，但它不起作用。它在android中运行良好，但在ios中不起作用。 我已将行为指定为 KeyboardAvoidingView 的填充、位置、高度，但它不起作用 请给出任何解决方案。

Android [1] 上的屏幕截图：https://i.stack.imgur.com/UETKh.jpg

IOS[2]上的截图：https://i.stack.imgur.com/SIDib.png

我的代码如下：

<Modal
    contentContainerStyle= backgroundColor: 'white', padding: 20, borderRadius: 10, marginLeft: 30, marginRight: 30 
    animationType="fade"
    visible=this.state.dialogVisible
>
    <KeyboardAvoidingView behavior='padding' enabled>
        <Text style=styles.descDialogInqueryFor> Inquire for </Text>
        <TextInput
            autoFocus=true
            maxLength=50
            underlineColorAndroid='transparent'
            style=styles.inpuTextDialog
            placeholder='Name'
            placeholderTextColor='#C7C7CD'
            onChangeText=(text) => this.setState( name: text )
        ></TextInput>
        <TextInput

            autoCompleteType='email'
            maxLength=40
            underlineColorAndroid='transparent'
            style=styles.inpuTextDialog
            placeholder='Email'
            placeholderTextColor='#C7C7CD'
            onChangeText=(text) => this.validateEmail(text)
        ></TextInput>
        <Text style=[styles.errorText,  display: this.state.displayEmailError ]>Invalid email address</Text>
        <TextInput

            autoCompleteType='email'
            maxLength=40
            underlineColorAndroid='transparent'
            style=styles.inpuTextDialog
            placeholder='Email'
            placeholderTextColor='#C7C7CD'
            onChangeText=(text) => this.validateEmail(text)
        ></TextInput>

        <Text style=[styles.errorText,  display: this.state.displayPhoneError ]>Invalid phone number</Text>
        <TextInput
            maxLength=30
            underlineColorAndroid='transparent'
            style=styles.inpuTextDialog
            placeholder='Subject'
            placeholderTextColor='#C7C7CD'
            onChangeText=(text) => this.setState( subject: text )
        ></TextInput>
        <TextInput
            blurOnSubmit=true
            multiline=true
            underlineColorAndroid='transparent'
            style=styles.messageInpuText
            placeholder='Message'
            placeholderTextColor='#C7C7CD'
            onChangeText=(text) => this.setState( message: text )
        ></TextInput>

        <Button style=styles.sendButtonDialog onPress=() => this.sendInquire()>
            <Text style=styles.sendButtonText>Send</Text>
        </Button>
    </KeyboardAvoidingView>
</Modal>

【参考方案1】：

根据我的经验，如果您不希望键盘出现任何问题，您需要使用滚动视图和观察者键盘显示/隐藏来进行动物修复布局。定制自己。

我也遇到了这个问题，因为我支持许多版本的 ios，所以使用 KeyboardAvoidingView 无法修复所有这些问题，有时当你有很多用户使用特殊版本时会出现一些隐藏的问题。 Android 会在布局更改时自动滚动内容，因此您无需在键盘显示时执行任何操作来修复布局。如果您检查 ios 的 KeyboardAvoidingView 可能会影响到 android。因此，我的建议是观察者键盘显示和自定义自己将是最好的。

PS 我记得 KeyboardAvoidingView 有 contentOffSet 属性来修复键盘改变状态时的动画滚动。但是我很困惑如何使用它来修复所有版本的 ios 并且经过多次尝试后我自定义了自己。希望我的经验可以帮助您找到正确的方法

【参考方案2】：

你只需在 Modal 中添加 KeyboardSpacer