如何使用flexbox將React Native圖像放入其容器中？

它是一個愚蠢的問題，但我有問題，我試圖適應圖像到它的容器。圖像溢出寬度：如何使用flexbox將React Native圖像放入其容器中？

代碼：

<View style = {styles.imageContainer}> 
     <Image style={styles.img} source={require('./img_1.png')} /> 
     </View> 

     <View style={styles.banner}> 
     <ScrollView > 
      <Text>Hellp Boy</Text> 
      <Text>Hellp Boy</Text> 
      <Text>Hellp Boy</Text> 

     </ScrollView> 
     </View>

和造型部分：

const styles = StyleSheet.create({ 

    imageContainer: { 
    backgroundColor : '#DB7093', 
    flex : 1, 
    padding : 10, 
    borderColor : '#7FFF00', 
    borderWidth : 10, 
    }, 
    img : { 
    flex : 1 , 
    resizeMode : 'stretch', 
    overflow : 'visible', 
    }, 
    banner: 
    { 
    flex : 2, 
    padding : 10, 
    borderColor : '#7FFF00', 
    borderWidth : 10, 
    }, 
});

來源

2016-03-04 user3473788

嘗試增加resizeMode='contain'爲道具，以你的形象：

<Image style={styles.img} source={require('./img_1.png')} resizeMode='contain' />

來源

2016-03-04 11:23:56

之前也試了一下，亙古不變的工作。 :( – user3473788

嘗試把transform: [{ scale: 1.0 }],您imageContainer

來源

2016-08-26 15:40:41

你也可以做一個'flex：-1'，那麼它將遵循minWidth屬性 –

添加flexDirection： '行' 到imageContainer

來源

2017-03-25 10:55:01

如何使用flexbox將React Native圖像放入其容器中？

回答

相關問題