react-native tabbar bottom隐藏一个组件

时间:2018-01-11 10:57:59

标签: react-native

我正在构建个人资料页面并拥有以下组件。 我有个人物照片的图像选择器 2.带有文本字段和按钮的ListView

我有一个底栏导航。在当前的实现中,底部的标签栏隐藏了底部的按钮,我无法找到解决此问题的方法。任何帮助,将不胜感激。以下是代码段

     render(){
    let {phone} = this.state,
     {studentName}=this.state,
     {studentClass}=this.state,
     {bloodGroup}=this.state,
     {parentName}=this.state,
     {email}=this.state,
     {sibling}=this.state,
     {siblingClass}=this.state,
     {address}=this.state;

    return(
        <View style={styles.studentInfo}>

            <TextField 
            label='Student Name'
            value={studentName}
            onChangeText={(studentName)=>this.setState({studentName})}
            />

             <TextField 
                label='Class'
                value={studentClass}
                onChangeText={(studentClass)=>this.setState({studentClass})}
            />

            <TextField 
                label='Blood Group'
                value={bloodGroup}
                onChangeText={(bloodGroup)=>this.setState({bloodGroup})}
            />

            <TextField 
                label='Parent Name'
                value={parentName}
                onChangeText={(parentName)=>this.setState({parentName})}
            />

            <TextField 
                label='Phone Number'
                value={phone}
                onChangeText={(phone)=>this.setState({phone})}
            />

            <TextField 
                label='E mail'
                value={email}
                onChangeText={(email)=>this.setState({email})}
            />

            <TextField 
                label='Sibling Studying in the school'
                value={sibling}
                onChangeText={(sibling)=>this.setState({sibling})}
            />

            <TextField 
                label='Class'
                value={siblingClass}
                onChangeText={(siblingClass)=>this.setState({siblingClass})}
            />

            <TextField 
                label='Address'
                value={address}
                onChangeText={(address)=>this.setState({address})}
            />

             <Button 
                style={{backgroundColor: '#3e9cd3'}} 
                textStyle={{fontSize: 18}}
                onPress={()=> this.handleButtonPress()}>
                Save
            </Button>
         </View>
    );
}

As you can see that the button is hidden behind the tabbar bottom component

0 个答案:

没有答案