react-native 中的弹性尺寸问题答案

【问题标题】：issue with flex dimension in react-nativereact-native 中的弹性尺寸问题
【发布时间】：2018-04-08 08:12:25
【问题描述】：

我正在尝试将我的布局屏幕与 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>
        )
    }
}

输出

在上面的输出中，您可以在开始处以及按钮和图像组件之间看到不需要的空间。这里有什么问题？

【问题讨论】：

标签： react-native

【解决方案1】：

你有

将containerStyle 添加为flex: 80，但您的avatar's height = screen width，因此与中心对齐并显示一些空间。

因此你需要删除

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

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

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

【讨论】：

【解决方案2】：

如果你想让Avatar 有一个特定的高度来垂直填充，那么

1- 从Avatar 及其兄弟View 中删除 flex。

2- 在Avatar 的height 属性中相应地更改500/500，或者您可以尝试Dimensions.get('window').height。 原因： 表达式 500/500 的计算结果为 1，这实际上使您的 Avatar 成为一个正方形，其中 width 和 height 等于 Dimensions.get('window').width。

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

【讨论】：