[英]Whole contents are pushed up when using KeyboardAvoidingView in react native
I have a issue when using KeyboardAvoidingView in react native. 我在React Native中使用KeyboardAvoidingView时遇到问题。 Follow is my code:
以下是我的代码:
<View style={styles.container}>
<View style = {styles.pagetitle_part}>
<Text style = {{fontSize: 25, color: '#ffffff'}}> Register User </Text>
<TouchableOpacity style = {{position: 'absolute', top: 30, left: 20}} onPress = {() => this.props.navigation.navigate('SignIn')}>
<Image style = {{width: 15, height: 15}} resizeMode = 'contain' source = {require('../assets/images/left_arrow.png')}/>
</TouchableOpacity>
</View>
<View style = {styles.main_part}>
<ScrollView style = {{width: deviceWidth}} showsVerticalScrollIndicator = {false}>
<KeyboardAvoidingView behavior = 'padding'>
<View style = {styles.component_input}>
<View style = {styles.title_view}>
<Text style = {styles.title_text}> Fist Name </Text>
</View>
<View style = {styles.input_view}>
<TextInput underlineColorAndroid = 'transparent' style = {styles.input_text} onChangeText = {this.handleFirstName}>{this.state.first_name}</TextInput>
</View>
</View>
<View style = {styles.component_input}>
<View style = {styles.title_view}>
<Text style = {styles.title_text}> Last Name </Text>
</View>
<View style = {styles.input_view}>
<TextInput underlineColorAndroid = 'transparent' style = {styles.input_text} onChangeText = {this.handleLastName}>{this.state.last_name}</TextInput>
</View>
</View>
... ... ...
</KeyboardAvoidingView>
</ScrollView>
</View>
</View>
On Android, when I tap TextInput then upper component is pushed up and so below component is fill out the screen. 在Android上,当我点击TextInput时,上半部分被向上推,因此下半部分被填满了屏幕。 But on iOS it's Ok.
但是在iOS上也可以。
Follow is screenshot before tapping the TextInput on android: 在Android上点击TextInput之前,请遵循以下屏幕截图:
Follow is screenshot after tapping then TextInput: 点按然后输入TextInput后,跟随屏幕截图:
As before I said, on iOS, everything is ok. 如前所述,在iOS上,一切正常。 How can I fix this issue on android?
如何在Android上解决此问题? Why on iOs is different from on android?
为什么在iOs上与android不同? I'm very happy to hear your advance.
听到您的进步我感到非常高兴。 Thanks.
谢谢。
For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding", but not for android. 对于iOS,您应该将KeyboardAvoidingView的“ behavior”参数设置为“ padding”,但对于android则不能。 I show a working example in this answer :
我在这个答案中显示了一个工作示例:
https://stackoverflow.com/a/52255480/5359812 https://stackoverflow.com/a/52255480/5359812
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.