无论如何，KeyboardAvoidingView 都会缩小我的 TextInputs答案

【问题标题】：KeyboardAvoidingView Shrinks My TextInputs No Matter What无论如何，KeyboardAvoidingView 都会缩小我的 TextInputs
【发布时间】：2019-01-01 09:00:37
【问题描述】：

无论我做什么，KeyboardAvoidingView 都会尽可能地缩小我的 TextInputs，而不是向它们上方的内容添加填充并将它们推离屏幕。

我想要的只是正常的行为，即我的内容被填充到屏幕之外并且没有任何东西缩小，就像在使用这个组件的最简单的教程中看到的那样。我已经尝试了所有的行为，以及视图层次结构的各种排列。无论我做什么，它都会缩小输入。

<KeyboardAvoidingView style={Styles.containerView} behavior={'padding'}>
<View style={Styles.topContainerView}>
    <Image style={Styles.subLogo} source={require('../../../assets/images/app-icon.png')} />
    <View style={{justifyContent: 'center', marginVertical: 10}}>
        <Text style={Styles.subtext}>{subtext}</Text>
    </View>
        <TextInput 
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({firstName: text})}
            value={this.state.firstName}
            />
        <TextInput
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({lastName: text})}
            value={this.state.lastName}
            placeholderText={'Last Name'}
            />
    <TextInput 
        style={Styles.textInput} 
        onChangeText={(text) => this.setState({email: text})}
        value={this.state.email}
        placeholderText={'Enter Email'}
        />
    <TextInput 
        style={Styles.textInput} 
        onChangeText={(text) => this.setState({password: text})}
        value={this.state.password}
        placeholderText={'Enter Password'}
        secureTextEntry={true}
        />

        <TextInput 
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({confirmPassword: text})}
            value={this.state.confirmPassword}
            placeholderText={'Confirm Password'}
            secureTextEntry={true}
            />
</View>
<View style={Styles.bottomContainerView}>
    <Button buttonStyle={Styles.continueButton} text={"Continue"} onPress={continueAction} />
    <TouchableOpacity style={Styles.cancelContainer} onPress={this.goBack}>
        <Text style={Styles.cancelText}>{'Cancel'}</Text>
    </TouchableOpacity>
</View> 
</KeyboardAvoidingView>

在我上面的代码中，它下面的 Image 元素和潜文本不会让步。它们不会添加任何填充，也不会缩小。相反，TextInputs 将全部缩小。

我只是希望它们被推离屏幕而不是缩小输入。

我还尝试在包含所有元素的 KeyboardAvoidingView 中添加一个 ScrollView，甚至为输入提供了一个硬编码的高度。

【问题讨论】：

您找到解决方案了吗？
不，无论我尝试什么都找不到解决方案。我最终编写了自己的滚动代码并摆脱了 KeyboardAvoidingView。我想你必须这样做。很糟糕。
谢谢，我已经将scrollView的底部填充放入我的状态，然后绑定键盘事件来修改它工作得很好。

标签： javascript html react-native keyboard padding

【解决方案1】：

在使用 RN 0.63.1 和 Android 9 时，我遇到了同样的问题。在阅读 GitHub 问题后，不鼓励使用 KeyboardAvoidingView，而是在我的 AndroidManifest.xml 中设置它来修复它。

默认值：

<activity
  ...
  android:windowSoftInputMode="adjustResize"
>

改成：

<activity
  ...
  android:windowSoftInputMode="adjustPan"
>

我发现设置这个可以使填充起作用，但它仍然离键盘太近了。我使用KeyboardAvoidingView 在键盘和文本输入之间添加一些填充。

【讨论】：