Question

我遇到一个问题，就是我的容器折叠在我的子组件上，该子组件由4张图像的列表和一行容器底部的图标组成。如果我明确设置高度，则可以使其足够大以适合一台设备的内容。但是，我现在根据手机的宽度和百分比调整图像的大小，然后进行缩放以节省纵横比。有没有办法使我的容器长到足够大以确保当其子组件根据设备宽度缩放时适合其子组件？

我以为React Native flex的默认设置是这么做的，但是无论出于什么原因，我的容器都无法容纳其中的图像，而是缩小了，并且所有内部内容都在缩小，除了那些位于我现在缩小的容器顶部的图像之外

    export default function BadgeQuickView() {
    return (   
        <View style={styles.badgeViewContainer}>
            <View style={styles.badgeContainerTop}>
                <View style={styles.badgeContainerLeftBorder}></View>
                <Text style={styles.badgeContainerTitle}>FEATURED BADGES</Text>
                <View style={styles.badgeContainerRightBorder}></View>
            </View>

            <View style={styles.quickBadgeList}>
                {TEST_BADGE_ARRAY.map(option => (
                    <View style={styles.badgeInfoContainer} key={option.id}>
                        <Image style={styles.badgeImage} source={{uri: option.url}} fadeDuration={0} />
                        <Text style={styles.badgeDescText}>{option.name}</Text>
                    </View>
                ))}
                <View style={styles.moreBadgesButtonContainer}>
                    <TouchableOpacity style={styles.moreBadgesButton}>
                        <Text style={styles.moreBadgesText}>All {`\n`} Badges</Text>
                        <Entypo name={'dots-three-horizontal'} size={moderateScale(20)} color={profileColors.editProfileText}/>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );

}

const styles = StyleSheet.create({
    badgeViewContainer: {
        width: '100%',
        height: moderateScale(130),
        borderStyle: 'solid',
        borderColor: userInterface.borderColor,
        borderBottomWidth: 2,
        backgroundColor: 'white',
        paddingBottom: 5
    },
    moreBadgesText: {
        color: 'black',
        fontFamily: 'montserrat',
        fontSize: moderateScale(8),
        textAlign: 'center',
        color: profileColors.editProfileText,
        textAlign: 'center',
    },  
    badgeDescText: {
        color: 'black',
        fontFamily: 'montserrat',
        fontSize: moderateScale(8),
        textAlign: 'center',
        color: profileColors.editProfileText,
        textAlign: 'center',
    }, 
    quickBadgeList: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        paddingLeft: 15,
    },
    badgeImage: {
        aspectRatio: 1,
        width: '100%',
        height: undefined,
        resizeMode: 'contain',
        marginBottom: 10,
    },  
    moreBadgesButton: {
        height: '100%',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center'
    },  
    moreBadgesButtonContainer: {
        height: '100%',
        width: '15%',
    },
    badgeInfoContainer: {
        height: '100%',
        width: '20%',
        flexDirection: 'column',
        padding: 5,
    },
    badgeContainerTop: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    badgeContainerLeftBorder: {
        borderStyle: 'solid',
        borderColor: userInterface.borderColor,
        borderTopWidth: 2,
        width: '5%',
        bottom: moderateScale(13) / 2,
    },
    badgeContainerTitle: {
        fontFamily: 'montserrat-bold',
        color: profileColors.editProfileText,
        marginHorizontal: 10,
        fontSize: moderateScale(13),
        bottom: moderateScale(13) /2,
    },
    badgeContainerRightBorder: {
        borderStyle: 'solid',
        borderColor: userInterface.borderColor,
        borderTopWidth: 2,
        width: '100%',
        bottom: moderateScale(13) / 2,
    },
});

**编辑：添加了当前的工作代码以供参考。 moderateScale(...)只是获取screenHeight并缩放高度，并且可以用于到目前为止我测试过的大多数设备。我希望尽可能不必显式设置它，而是根据其内容进行扩展。

下面是想要的和不想要的外观。当我注释掉高度：从视图容器并将其设置为flex时，它将不会扩展以适合其内容。当在图像中添加真实图像时，显示在底部边框的顶部，并且文本完全不可见，通常在红色框下显示。添加了红色，作为图像和文本呈现位置的指示。

使用React Native的Flex布局

0 个答案: