反応しないフレックスボックスの全幅画像が伸びていない

2列グリッドのグリッドがあり、コンテナの幅に合わせて画像を取得しようとしています。現在のコードでは、イメージはimageWrapperの使用可能な高さを塗りつぶします。 imageWrapperに大きな高さを設定すると、画像が幅を埋めるように伸びますが、異なる製品の画像が可変な高さを持つため、これは実行可能ではありません。反応しないフレックスボックスの全幅画像が伸びていない

<TouchableOpacity style={styles.item} onPress={() => this.openProduct(item)}> 
    <Text style={styles.boldLabel}>{item.name}</Text> 
    <View style={styles.imageWrapper}> 
     <Image style={styles.gridImage} 
      resizeMode={'contain'} 
      source={{uri: image }} /> 
    </View> 
    </TouchableOpacity>

CSS：

item: { 
    flexDirection: 'column', 
    width: Metrics.screenWidth/2 - Metrics.doubleBaseMargin, 
    justifyContent: 'center', 
    margin: Metrics.baseMargin, 
    backgroundColor: "#FFF", 
}, 
imageWrapper: { 
    flex:1, 
    flexDirection:'row' 
}, 
gridImage: { 
    flex:1, 
    height: null, 
    width: null 
}

任意の助けもいただければ幸いです。ありがとう！

出典

2017-08-18 Justin Lok

この gridImageを試す：{ フレックス：1、高さ：100％、幅：100％ } –

Iを試み、ヌルの高さ/幅の影響を及ぼさないように思われます。 –

答えを削除しました。注意してください、あなたは適切な答えをしたい場合はそれを解決する必要があるので、_resize_ではなく、その容器の幅を埋めるためにイメージを作るように頼んでいます。 – LGSon

Try react-native-fit-image （私のモジュールではない）。アスペクト比を維持した画像を表示するのが最良です。コンテナとグリッドのプロパティが正しく設定されていることを確認してください。flex

出典

2017-08-18 05:52:54 Somename

私は反応するネイティブフィットイメージを試しましたが、画像のサイズ変更。私は自分の問題を解決するような反応ネイティブレスポンスイメージを使用しています。ありがとう –

反応しないフレックスボックスの全幅画像が伸びていない

答えて

関連する問題