ImageBackground ResizeMode

Question

我最近更新陣營本土和它推出的警告，用下面的代碼：

<Image 
     source={require('../../assets/icons/heart.png')} 
     style={{ 
     resizeMode: 'contain', 
     height: 25, 
     width: 25 
     }} 
    > 
     <Text>foobar</Text> 
    </Image> 

而且警告：

index.ios.bundle：50435使用<圖像>帶着孩子被棄用，在不久的將來 將是一個錯誤。請重新考慮佈局或使用< ImageBackground>代替。

問題是當我使用ImageBackground組件時，它給了我一個警告，指出你不能使用ResizeMode風格。

<ImageBackground 
     source={require('../../assets/icons/heart.png')} 
     style={{ 
     resizeMode: 'contain', 
     height: 25, 
     width: 25 
     }} 
    > 
     <Text>foobar</Text> 
    </ImageBackground> 

而且警告：

警告：無法道具類型： 'resizeMode' 供應到 '查看' 無效props.style關鍵。壞對象：{ResizeMode：'contains，height：25， width：25}

你應該如何使用ImageBackgrounds？似乎沒有關於它的任何文檔在線。

Answer 1

ImageBackground接受兩種風格的道具 - style和imageStyle - 它們（顯然）分別應用於內部視圖和圖像。還值得注意的是，容器樣式的高度和寬度值自動應用於圖像樣式。 詳情請訪問this。

Answer 2

我有這個問題;我最終放棄了<ImageBackground>並回到使用<Image>，但刪除了其中的元素。然後，我把所有東西都包裹在一個新的<View>標籤中，並將<Image>絕對放置在樣式中。這裏是我的代碼結束了在那裏，如果是使用：

JSX

render() { 
    return (
     <View style={{ alignItems: 'center' }}> 
     <Image 
      source={require('../images/pages/myImage.jpg')} 
      style={styles.backgroundImage} 
     /> 

風格

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window'); 

const styles = StyleSheet.create({ 

    backgroundImage: { 
    flex: 1, 
    position: 'absolute', 
    resizeMode: 'cover', 
    width: viewportWidth, 
    height: viewportHeight, 
    backgroundColor: 'transparent', 
    justifyContent: 'center', 
    alignItems: 'center' 
    },