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は<画像の使用します>子どもと一緒に使用することは推奨されず、 は近い将来エラーになります。代わりに、 use < ImageBackground>のレイアウトを再検討してください。

ImageBackgroundコンポーネントを使用すると、ResizeModeスタイルを使用できないという警告が表示されます。

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

と警告：

警告：失敗した小道具の種類：無効props.styleキー 'ResizeModeです' は、 '表示' に供給されます。不正なオブジェクト：{ResizeMode： '含む、高さ：25、 幅：25}

ImageBackgroundsはどのように使用しますか？それはオンライン上のドキュメントではありません。

Answer 1

ImageBackgroundは2つのスタイル小道具（styleとimageStyle）を受け入れます。これは（明らかに）内部のViewとImageにそれぞれ適用されます。コンテナスタイルからの高さと幅の値がイメージスタイルに自動的に適用されることにも注意してください。 詳細については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' 
    },