在 react native 中使用 KeyboardAvoidingView 时，整个内容都被向上推

Posted 2023-03-16

【中文标题】在 react native 中使用 KeyboardAvoidingView 时，整个内容都被向上推

【英文标题】：Whole contents are pushed up when using KeyboardAvoidingView in react native

【发布时间】：2018-12-03 15:10:38

【问题描述】：

在 react native 中使用 KeyboardAvoidingView 时遇到问题。 以下是我的代码：

<View style=styles.container>
    <View style = styles.pagetitle_part>
        <Text style = fontSize: 25, color: '#ffffff'> Register User </Text>
        <TouchableOpacity style = position: 'absolute', top: 30, left: 20 onPress = () => this.props.navigation.navigate('SignIn')>
            <Image style = width: 15, height: 15 resizeMode = 'contain' source = require('../assets/images/left_arrow.png')/>
        </TouchableOpacity>
    </View>
    <View style = styles.main_part>
        <ScrollView style = width: deviceWidth showsVerticalScrollIndicator = false>
            <KeyboardAvoidingView behavior = 'padding'>
                <View style = styles.component_input>
                    <View style = styles.title_view>
                        <Text style = styles.title_text> Fist Name </Text>
                    </View>
                    <View style = styles.input_view>
                        <TextInput underlineColorandroid = 'transparent' style = styles.input_text onChangeText = this.handleFirstName>this.state.first_name</TextInput>
                    </View>
                </View>
                <View style = styles.component_input>
                    <View style = styles.title_view>
                        <Text style = styles.title_text> Last Name </Text>
                    </View>
                    <View style = styles.input_view>
                        <TextInput underlineColorAndroid = 'transparent' style = styles.input_text onChangeText = this.handleLastName>this.state.last_name</TextInput>
                    </View>
                </View>
                ... ... ...
            </KeyboardAvoidingView>
        </ScrollView>
    </View>
</View>

在 Android 上，当我点击 TextInput 时，上部组件被向上推，因此下部组件填充屏幕。但在 ios 上没问题。

以下是在android上点击TextInput之前的截图：

点击TextInput后的截图如下：

正如我之前所说，在 iOS 上，一切正常。 我怎样才能在android上解决这个问题？ 为什么在 iOs 上与在 android 上不同？ 我很高兴听到你的进步。谢谢。

【问题讨论】：

您似乎遇到了这个问题：***.com/questions/4207880/…

这个问题有什么更新吗？？

【参考方案1】：

对于 iOS，您应该将 KeyboardAvoidingView 的“行为”参数设置为“填充”，但不适用于 Android。我在这个答案中展示了一个工作示例：

https://***.com/a/52255480/5359812

【讨论】：

感谢您的回答。但是我仍然有同样的问题，尽管忽略了行为参数。正如我在问题中所说，上部组件（styles.pagetitle_part）仍然被推高。屏幕由下部组件（styles.main_part）填充。我希望你提前。