KeyboardAvoidingView 无论如何都会缩小我的 TextInputs
KeyboardAvoidingView Shrinks My TextInputs No Matter What
无论我做什么,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>
在我上面的代码中,图像元素和它下面的子文本不会移动。不会向它们添加填充,也不会收缩。相反,TextInputs 将全部缩小。
我只想将它们推出屏幕而不是缩小输入。
我还尝试在包含所有元素的 KeyboardAvoidingView 中添加一个 ScrollView,甚至为输入提供硬编码高度。
在使用 RN 0.63.1 和 Android 9 时,我遇到了同样的问题。在阅读 GitHub 问题后,不鼓励使用 KeyboardAvoidingView
而是在我的 AndroidManifest.xml 中设置它来修复它。
默认:
<activity
...
android:windowSoftInputMode="adjustResize"
>
改为:
<activity
...
android:windowSoftInputMode="adjustPan"
>
我发现设置这个可以使填充工作,但它仍然离键盘太近。我使用 KeyboardAvoidingView
在键盘和文本输入之间添加了一些填充。
无论我做什么,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>
在我上面的代码中,图像元素和它下面的子文本不会移动。不会向它们添加填充,也不会收缩。相反,TextInputs 将全部缩小。
我只想将它们推出屏幕而不是缩小输入。
我还尝试在包含所有元素的 KeyboardAvoidingView 中添加一个 ScrollView,甚至为输入提供硬编码高度。
在使用 RN 0.63.1 和 Android 9 时,我遇到了同样的问题。在阅读 GitHub 问题后,不鼓励使用 KeyboardAvoidingView
而是在我的 AndroidManifest.xml 中设置它来修复它。
默认:
<activity
...
android:windowSoftInputMode="adjustResize"
>
改为:
<activity
...
android:windowSoftInputMode="adjustPan"
>
我发现设置这个可以使填充工作,但它仍然离键盘太近。我使用 KeyboardAvoidingView
在键盘和文本输入之间添加了一些填充。