リアクタネイティブイメージが表示されない

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を参照してください。