[英]Overlap using KeyboardAvoidingView in a React Native project tested in Android
I'm creating a login, and to solve the problem with the virtual keyboard covering my text inputs I'm using KeyboardAvoidingView
. 我正在创建一个登录名,并且为了解决虚拟键盘覆盖我的文本输入的问题,我使用了KeyboardAvoidingView
。 I thought that the logo would animate nicely since I define both the form and the logo as flex: 1 (shrink/grow as much as possible in the available space) Since opening a keyboard diminishes the available space on the screen, the logo does change, but shrinks too much and then an overlap occurs. 我认为徽标会很好地动画,因为我将表单和徽标都定义为flex:1(在可用空间中尽可能缩小/增长)由于打开键盘会减少屏幕上的可用空间,因此徽标确实会发生变化,但收缩太多,然后发生重叠。 What I am missing? 我缺少什么?
This is my LoginScreen: 这是我的登录屏幕:
import React, { Component } from 'react'
import { Image, StyleSheet, View, KeyboardAvoidingView, Button } from 'react-native'
import FormTextInput from '../components/FormTextInput'
class LoginScreen extends Component {
state = { email: '', password: '' }
handleEmailUpdate = email => {
this.setState({ email })
}
handlePasswordUpdate = password => {
this.setState({ password })
}
handleLoginPress = () => {
console.log('Login button pressed')
}
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior="padding">
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
},
logo: {
flex: 1,
width: '80%',
resizeMode: 'contain',
alignSelf: 'center',
},
form: {
flex: 1,
justifyContent: 'center',
width: '80%',
},
})
export default LoginScreen
*EDIT: after adding the line android:windowSoftInputMode="adjustPan"
, the keyboard overlaps the login button: *编辑:添加android:windowSoftInputMode="adjustPan"
,键盘与登录按钮重叠:
Use this is your android manifest 使用这是你的android清单
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:screenOrientation="portrait"
android:launchMode="singleTop"
android:windowSoftInputMode="adjustPan" //add this line
android:exported="true">
try this it will solve this problem 试试这个会解决这个问题
try this. 尝试这个。
{Platform.OS === 'ios' ?
<KeyboardAvoidingView style={styles.container} behavior="padding">
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
keyboardShouldPersistTaps='handled'>
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</ScrollView>
</KeyboardAvoidingView>
: <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
keyboardShouldPersistTaps='handled'>
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</ScrollView>
}
and style is 和风格是
const styles = StyleSheet.create({
container: {
flex: 1, paddingVertical: 30,
alignItems: 'center', justifyContent: 'center',
backgroundColor: '#FFFFFF',
},
logo: {
flexGrow: 1,
width: '80%',
resizeMode: 'contain',
alignSelf: 'center',
},
form: {
flexGrow: 1,
justifyContent: 'center',
width: '80%',
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.