反应本机图像不显示

Question

我试图显示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> 

Answer 1

我不是真的100％清楚你的问题到底是什么，但因为你是从网上拉图像，设置高度需要&宽度，因为渲染器需要计算它需要的空间在视图中保留它。使用本地捆绑的图像，渲染器可以自行检索该信息，因此在这种情况下不需要高度为&的宽度。希望至少解释原因。

请参阅Network Images中的原始文档。