反应本机图像不显示

法兰克人

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

这是图像存放位置的快照:

在此处输入图片说明

这是我的组件:

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>
克里斯·盖尔曼

我并不是真的100%清楚您的问题到底是什么,但是由于您是从网络中提取图像,因此需要设置高度和宽度,因为渲染器需要计算在视图中为其预留的空间。使用本地捆绑的图像,渲染器可以检索该信息本身,因此在这种情况下不需要高度和宽度。希望至少能解释原因。

请参阅react native文档中的Network Images

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章