在react native中使用KeyboardAvoidingView时,整个内容被推高

时间:2018-12-03 15:10:38

标签: android react-native tpkeyboardavoiding

在react native中使用KeyboardAvoidingView时出现问题。 遵循我的代码:

<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>

在Android上,当我点击TextInput时,上侧组件被向上推,因此下侧组件被填满了屏幕。但是在iOS上还可以。

下面是在Android上点击TextInput之前的屏幕截图:

screenshot before tapping the TextInput

下面是点击然后输入TextInput后的屏幕截图:

screenshot after tapping the TextInput

如前所述,在iOS上,一切正常。 如何在Android上解决此问题? 为什么在iOs上与android不同? 听到您的进步我感到非常高兴。谢谢。

1 个答案:

答案 0 :(得分:0)

对于iOS,您应该将KeyboardAvoidingView的“ behavior”参数设置为“ padding”,但对于android则不能。我在此答案中显示了一个有效的示例:

https://stackoverflow.com/a/52255480/5359812