[React Native] 背景圖片 ImageBackground v.s. Image

(Sample Code from medium article:
https://medium.com/@hklucher/how-to-use-an-imagebackground-in-react-native-515ee06a6b1f)
舊版的React Native(<= 0.48)，
讓人可以使用<Image>標籤包住你的內容，
也就是用<Image>呈現你需要的背景圖片
像這樣：

class BackgroundImage extends React.Component {
    render() {
      return (
       <Image
         source={{uri: 'link-to-image'}}
         style={{resizeMode: 'stretch'}}>
          <View>
            <Text> I am child view. </Text>
          </View>
        </Image>
      )
    }
  }

由於是<Image>圖片屬性，我們可以設定resizeMode來決定圖片會以什麼方式適應視窗大小。

不過新版的RN將"圖片"與"背景圖片"這兩件事情切開了，
如果將上面的範例在新版的React Native(>=0.49)編譯，你會看到以下警示：

Using <Image> with children is deprecated and will be an error in the near future. Please reconsider the layout or use <ImageBackground> instead.

喔！
那很簡單，就用<ImageBackground>取代<Image>就好了

不過如果單純改變元件名稱就能搞定，就不需要寫部落文留下記錄了。
修改編譯後你會看到以下錯誤：

Warning: Failed prop type: Invalid props.style key 'resizeMode' supplied to 'View'.

原來<ImageBackground>跟<Image>有根本的差異性。
<ImageBackgound>這元件是一個View包一個Image，
因此resizeMode這個只適用在<Image>的屬性，不能直接用於View的屬性中。
<ImageBackground>有額外針對圖片設定的屬性 => "imageStyle"
因此原本用在<Image> style的屬性設定，改成<ImageBackground>後，
可以原封不動地用在imageStyle之中。

因此前面的範例改成這樣就可以順利編譯了：

class FixedBackgroundImage extends React.Component {
    render() {
      return (
       <ImageBackground
         source={{uri: 'link-to-image'}}
         style={{flex: 1}} // Set the width and height
         imageStyle={{resizeMode: 'stretch'}}>
          <View>
            <Text> I am child view. </Text>
          </View>
        </Image>
      )
    }
  }

看網路上的學習資源會一直踩到這個雷，
在此記錄加深一下印象。