反应本机KeyboardAvoidingView无法正常工作 [英] React Native KeyboardAvoidingView not working properly
本文介绍了反应本机KeyboardAvoidingView无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正尝试将KeyboardAvoidingView与behavior ="padding"一起使用.
I am trying to use the KeyboardAvoidingView with behavior="padding".
当我尝试在TextInput中输入任何文本时，TextInput字段没有向上移动.我在最后添加了一个小视图，但它上面的视图是向上移动的.
When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it.
我还具有带有offset的KeyboardAvoidingView height属性.它工作的组件很少，例如2个TextInputs.但是，当我添加所有组件时，UI变得疯狂并且行为混乱.
I have also with KeyboardAvoidingView height property with offset. It was working few components like 2 TextInputs. But when I add all the components the UI goes insane and behave jumbled up.
有什么想法吗?
在链接.
render() {
return (
<View style={styles.backgroundContainer}>
<Loader
loading={this.state.isLoading} />
<KeyboardAvoidingView
keyboardVerticalOffset={10}
style={styles.mainContainer}
behavior='padding' >
<View style={styles.formContainer}>
<View style={[styles.centerContainer, { marginTop: 40 }]}>
<Image source={require('./../../Resources/logo.png')} />
<Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}>AppName</Text>
<Text style={styles.loginMsg}> Login to your Account </Text>
</View>
<View style={styles.inputFieldsContainer}>
<Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} />
<TextInput
placeholder='Email'
returnKeyType='next'
keyboardType='email-address'
onChangeText={(value) => this.setState({ userEmail: value })}
onSubmitEditing={() => this.passwordInput.focus()}
style={styles.inputFields} />
</View>
<View style={styles.inputFieldsContainer}>
<Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} />
<TextInput
returnKeyType='go'
secureTextEntry
placeholder='Password'
ref={(input) => this.passwordInput = input}
onChangeText={(value) => this.setState({ password: value })}
style={styles.inputFields} />
</View>
<View style={styles.buttonContainer}>
<Button
fontSize='8'
color='gray'
title='Remember Me'
onPress={() => {
console.log('Remember Me Clicked');
}} />
<Button
color='gray'
title='Forgot Password?'
onPress={() => {
console.log('Forgot Password Clicked');
}} />
</View>
<TouchableOpacity
style={styles.buttonLogin}
onPress={() => {
console.log('Login Clicked');
}}
>
<Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}>Login</Text>
</TouchableOpacity>
<View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}>
</View>
<View style={[styles.centerContainer, { marginBottom: 10 }]}>
<Text style={styles.loginMsg}>Don't have a Account</Text>
<TouchableOpacity
style={styles.buttonRegister}
onPress={() => navigate('Register')} >
<Text style={styles.buttonRegisterText}>REGISTER NOW</Text>
</TouchableOpacity>
</View>
</View>
<View style={{ height: 10, backgroundColor: '#628499', }}>
</View>
</KeyboardAvoidingView>
</View>
);
}
const styles = StyleSheet.create({
backgroundContainer: {
flex: 1, backgroundColor: 'green'
},
mainContainer: {
flex: 1, margin: 25,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
backgroundColor: 'white',
justifyContent: 'space-between'
},
formContainer: {
flex: 1, paddingLeft: 25, paddingRight: 25
},
centerContainer: {
alignItems: 'center', marginBottom: 10,
},
loginMsg: {
margin: 10,
fontSize: 20, color: 'gray'
},
inputFieldsContainer: {
flexDirection: 'row', margin: 10,
borderWidth: 1, borderRadius: 5, borderColor: 'gray',
},
inputFields: {
flexGrow: 1,
marginTop: 5, marginBottom: 5,
height: 30,
backgroundColor: 'rgba(255,255,255,0.4)',
paddingHorizontal: 10,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between'
},
buttonLogin: {
alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,
backgroundColor: '#2980b9',
borderWidth: 1, borderRadius: 5, borderColor: 'gray'
},
buttonRegister: {
alignItems: 'center', height: 40,
marginLeft: 50, marginRight: 50
},
buttonRegisterText: {
fontSize: 20, fontWeight: 'bold', color: 'gray'
},
loading: {
position: 'absolute',
left: 0, right: 0, top: 0, bottom: 0,
alignItems: 'center', justifyContent: 'center'
}, });
推荐答案
我使用了KeyboardAvoidingView，它也不起作用. 我找到了这个解决方案，您可以获取基本代码.
I used KeyboardAvoidingView, it also doesn't work. I found this solution, You can take the base code.
安装
npm i react-native-keyboard-aware-scroll-view --save
用法
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
您可以在此处
这篇关于反应本机KeyboardAvoidingView无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
