Question

我有一个包含一个表格标题和3个输入字段的注册表格。当我使用KeyboardAvoidingView时，设计变得失真了。我的代码如下：-

Index.js代码：-

const Registration = (props)=>{
  return (

            <SafeAreaView style={styles.container}>
                <Form submitForm={submitForm} />
            </SafeAreaView>

    )
}

Form.js

const Form = (props)=>{
 return (
        <View style={{flex:1}}>
            <View style={[styles.headerTextContainer]}>
                <Text style={styles.headerText}>
                    Enter details to get started
                </Text>
            </View>

            <KeyboardAvoidingView behavior="height" style={styles.formContainer}>
                <View style={{flex:.20,marginBottom:25}}>
                        <View style={{flex:1.5,}}>
                                <Text style={styles.labelText}>First Name</Text>
                        </View>
                        <View style={{flex:3}}>
                                <TextInput
                                    value={userinfo.firstName}
                                    onChangeText={(text)=>setFormValue('firstName',text)}
                                    style={styles.input}
                                />
                        </View>
                        <View style={{flex:1}}>
                            <Text style={styles.error}>{formError.first_name_error}</Text>
                        </View>
                    </View>
            </KeyboardAvoidingView>
        </View>
    )
}

对应的CSS：-

const styles = StyleSheet.create({
    headerTextContainer:{
        flex:.15,
        flexDirection:'column-reverse'
    },
    headerText:{
        color:'#000',
        fontSize:23,
        textAlign:'center'
    },
    formContainer:{
        flex:.75,
        padding:40
    },

    input:{
        height: 50, 
        borderColor: '#DFE4EB', 
        borderWidth: 1,
        borderRadius:10
    },

    labelText:{
        color:'#BDBDBD',
        // marginLeft:12,
        marginBottom:10
    },

    buttonContainer:{
        flex:.20,
        alignContent:'center',
        justifyContent:'center',
        paddingLeft: 50,
        paddingRight: 50,
    }
})

我是新来的本地人。我无法在此代码中找到问题。我尝试更改行为，但没有任何作用。如果有人可以指导我有关我在做什么错，这将很有帮助

以下是屏幕上的图像：-

使用flex时KeyboardAvoidingView不起作用-React Native

0 个答案: