Question

我试图沿水平轴{flexDirection: row, flex: 1}显示等间距的5张图像如果指定高度和宽度，图像会显示正常，但我想避免这种情况。 我引用了与此类似的其他问题，但没有一个解决方案有效。更重要的是，我想了解到底发生了什么。

以下是图片所在位置的快照：

这是我的组件：

import React from 'react-native';

const {
    Component,
    Text,
    StyleSheet,
    PropTypes,
    View,
    Image,
} = React;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        height: 100,
        borderColor: '#FFbd00',
        borderWidth: 3,
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 20,
        padding: 5,
        alignItems: 'stretch',
        alignSelf: 'stretch',
        justifyContent: 'center',
    },
    row: {
        flex: 1,
        alignSelf: 'stretch',
        flexDirection: 'row',
    },
    column: {
        flex: 1,
    },
    panel: {
        padding: 5,
        alignItems: 'center',

    },
    name: {
        padding: 5,
        borderBottomColor: '#bbb',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderRightColor: '#bbb',
        borderRightWidth: StyleSheet.hairlineWidth,
        justifyContent: 'center',
    },
    spaces: {
        padding: 5,
        borderBottomColor: '#bbb',
        borderBottomWidth: StyleSheet.hairlineWidth,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 32,
        fontWeight: '300',
    },
    imagesContainer: {
        flex: 1,
        alignItems: 'stretch',
    },
    image: {
        flex: 1,
        width: null,
        height: null,
    },
});

export default class ParkingLotItem extends Component {
    constructor(props, context){
        super(props, context);

    }

    render() {
        return (
            <View pointerEvents='auto' style={styles.container}>
                <View style={[styles.row, {flex: 1.5}]}>
                    <View style={[styles.column, styles.name, {flex: 2}]}>
                        <Text numberOfLines={1} style={styles.text}>{this.props.lot.name}</Text>
                    </View>
                    <View style={[styles.column, styles.spaces]}>
                        <Text numberOfLines={1} style={styles.text}>{this.props.lot.available}</Text>
                    </View>
                </View>
                <View style={styles.row}>
                    <View style={[styles.panel, styles.row]}>
                        <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
                        <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
                        <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
                        <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
                        <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
                    </View>
                </View>
            </View>
        );
    }
}

ParkingLotItem.propTypes = {
    lot: PropTypes.shape({
        name: PropTypes.string.isRequired,
        available: PropTypes.number.isRequired,
    }).isRequired,
};

以下是图像和图像容器使用的代码：

imagesContainer: {
    flex: 1,
    alignItems: 'stretch',
},
image: {
    flex: 1,
    width: null,
    height: null,
},

和....

<View style={[styles.panel, styles.row]}>
    <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
    <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
    <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
    <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
    <View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
</View>

Answer 1

我并不是100％清楚你的问题究竟是什么，但是因为你是从网上提取图像，所以设置高度＆amp; width是必需的，因为渲染器需要计算视图中需要为其保留的空间。使用本地捆绑的图像，渲染器可以自己检索该信息，因此高度和在这种情况下不需要宽度。希望至少解释为什么。

请参阅react原生文档中的Network Images。

反应本机图像不显示

1 个答案: