KeyboardAvoidingView缩小我的文本输入无所谓

时间:2018-07-24 16:39:22

标签: javascript html react-native keyboard padding

无论我做什么,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,其中包含所有元素,甚至为输入指定了硬编码高度。

1 个答案:

答案 0 :(得分:1)

在使用RN 0.63.1和Android 9时,我遇到了相同的问题。阅读GitHub问题后,不鼓励使用KeyboardAvoidingView,而是在我的AndroidManifest.xml中对此问题进行了设置。

默认值:

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

将其更改为:

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

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