Question

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

输出

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

Answer 1

你有

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

因此您需要删除

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

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

Answer 2

如果您希望Avatar具有垂直填充的特定高度，则

1-从Avatar及其同级View移除flex。

2-在500/500的{{1}}道具中相应更改height，或者您可以尝试Avatar。 原因：表达式Dimensions.get('window').height评估为500/500，这有效地使1成为Avatar和width等于height的正方形{1}}。

或者，如果Dimensions.get('window').width尺寸符合预期，那么您可以参考this获取有关Avatar/Image儿童行为的更多说明，如果您愿意的话。

react-native中的flex维度问题

2 个答案: