渲染網絡圖像和保持高度

寬高比陣營天然：0.47.1渲染網絡圖像和保持高度

如何將保持高度的縱橫比時的寬度爲100％？基本上我想在保持縱橫比的同時自動縮放高度。圖像將顯示在FlatList（不一定，如果有其他事情我很樂意更改FlatList）。圖像被從data數組，它在state設置顯示：

export default class ImageTest extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     data : [ 
     {id: 1, name: "image1", url: "http://urlOfImage.com/1.jpg"} 
     {id: 2, name: "image2", url: "http://urlOfImage.com/2.jpg"} 
     {id: 3, name: "image3", url: "http://urlOfImage.com/3.jpg"} 
     {id: 4, name: "image4", url: "http://urlOfImage.com/4.jpg"} 
     {id: 5, name: "image5", url: "http://urlOfImage.com/5.jpg"} 
     ]; 
    } 
    } 

    render() { 
    return (
    <View style={styles.container}> 
     <FlatList 
      data={this.state.data} 
      renderItem = {({item})=> 
       <Text style={styles.item}>{item.name}</Text> 
       <Image 
        source={uri: item.url} 
        style={styles.myImageStyle} /> 
      } 
     /> 
    </View> 
    ) 
    } 
} 

const styles = StyleSheet.create(
    myImageStyle: { 
    width: Dimensions.get('window').width, 
    height: /* WHAT DO I PUT HERE ?? */ 
    } 
)

因此圖像可以在高度發生變化，原來的高度可以是700像素，一些也許1200像素，或者甚至方形的圖像。我如何定義每個圖像的高度，因爲它們來自數組？

非常感謝

來源

2017-08-13 Somename

看看[react-native-scalable-image]（https://www.npmjs.com/package/react-native-scalable-image） –

您可以從URI獲取圖片的尺寸。您可以循環訪問陣列，並使用Image組件中包含的靜態方法getSize()獲取每個圖像的尺寸。這裏是一個documentation for this method

例子：

const preloadedImgData = [] 
this.state.data.forEach((img) => { 
    Image.getSize(img.url, (w, h) => { 
     img.dimensions = {w, h} 
     preloadedImgData.push(img) 
    }) 
})

我不知道，如果上面的代碼是100％正確的，但你有這個想法:)

編輯：

你也可以使用這個模塊，它應該盡你所能：react-native-fit-image

- 我不是這個模塊的擁有者

來源

2017-08-13 19:51:55 mkatanski

它作品！ 'fit-image'模塊做到了。我要去探索它，看看它們是如何工作的。它到目前爲止並不適用於本地圖像，但它非常棒！萬分感謝。我實際上只是簡單地看了一下，並跳過它，因爲第一個例子說預先提到尺寸。我應該測試它。再次感謝隊友。乾杯！！ – Somename

渲染網絡圖像和保持高度

回答

相關問題