web-dev-qa-db-ja.com

ImageBackground ResizeMode

私は最近Reactネイティブを更新し、次のコードで警告を導入しました：

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

そして警告：

index.ios.bundle：50435子での<Image>の使用は推奨されておらず、近い将来エラーになります。レイアウトを再検討するか、代わりに<ImageBackground>を使用してください。

問題は、代わりにImageBackgroundコンポーネントを使用すると、ResizeModeスタイルを使用できないという警告が表示されることです。

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

そして警告：

警告：失敗したプロップタイプ：無効なprops.styleキー 'resizeMode'が 'View'に提供されました。不正なオブジェクト：{ResizeMode： '含む、高さ：25、幅：25}

ImageBackgroundsをどのように使用する予定ですか？オンラインでのドキュメントはありません。

javascriptimagereact-nativejsx
8
Waltari

ImageBackgroundは、2つのスタイルプロップ（styleとimageStyle）を受け入れます。これらは（明らかに）内部のViewとImageにそれぞれ適用されます。また、コンテナースタイルの高さと幅の値が画像スタイルに自動的に適用されることにも注意してください。詳細は this をご覧ください。

18
tahir mahmood

resizeMode: 'contain'インラインstyle外。

例：

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

私はまさにこの問題を抱えていました。私は<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'
  },
1
Sternjobname