React native react native中的flex维度存在问题

我试图将我的布局屏幕与flexbox对齐，但在组件子级之间存在不需要的空间

import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
export default class WelcomePage extends Component {
    render() {
        const {navigate}=this.props.navigation
        return (
            <View style={{flexDirection:'column',flex:1,alignItems:'center',justifyContent: 'flex-start'}}>
            <Avatar
              width={Dimensions.get('window').width}
              height={Dimensions.get('window').width*500/500}
              containerStyle={{flex:80}}
              imageProps={{resizeMode:'cover'}}
              source={require('../assets/images/logo.png')}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
            />
            <View style={{flexDirection:'row',flex:20}}>
                <Button  large title='LOGIN' icon={{name: 'user-secret',type:'font-awesome'}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                <Button  large title='REGISTER' icon={{name: 'user-plus',type:'font-awesome'}} onPress={() => navigate('register')} containerViewStyle={{borderRadius:5}} borderRadius={5} />
            </View> 
            </View>
        )
    }
}  

import React，{Component}来自'React'；
从“react native”导入{视图、图像、样式表、维度}；
从“react native elements”导入{卡、按钮、化身}；
导出默认类WelcomePage扩展组件{
render（）{
const{navigate}=this.props.navigation
返回(

在上面的输出中，您可以看到按钮和图像组件之间的起始位置有一个不需要的空间。这里有什么问题？
如果您希望
头像有一个特定的垂直填充高度，那么

1-从
Avatar
及其同级
视图中删除flex

2-在
Avatar
的
height
道具中相应地更改
500/500
，或者您可以尝试
尺寸。获取（'window'）.height
。原因：表达式
500/500
的计算结果为
1
，这有效地使您的
化身成为一个正方形，宽度
和
高度
等于
维度。获取（'window'）。宽度

或者，如果
Avatar/Image
大小符合预期，那么您可以参考更多关于
flexbox
孩子行为的解释，如果您愿意的话。


添加了
containerStyle
为
flex:80
，但您的
avatar的高度=屏幕宽度
，因此与中心对齐并显示一些空间

因此，您需要删除

height={Dimensions.get('window').width*500/500}

并将
flex
添加到图像中，以覆盖整个flex

avatarStyle={{flex:80}
console.log（“Works！”）}
activeOpacity={0.7}
/>

avatarStyle={{flex:80}}

<Avatar
                    width={Dimensions.get('window').width}
                    containerStyle={{flex:80}}
                    avatarStyle={{flex:80}}
                    imageProps={{resizeMode: 'cover'}}
                    source={require('../assets/images/logo.png')}
                    onPress={() => console.log("Works!")}
                    activeOpacity={0.7}
                />