web-dev-qa-db-ja.com

react-native-画面サイズ全体ではなく、含まれるビューに画像を合わせる

画像のシームレスなグリッドを作成できるように、含まれるビューに画像を収めようとしています。問題はそれです resizeMode='contain'は画面の幅または少なくとも一部のより高いレベルのコンテナに収まるようです。各リスト項目のサイズに収まるように画像が必要です。

スタイルと結果のグリッドの非常にい例は次のとおりです。

スタイル：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },

  item: {
    flex: 1,
    overflow: 'hidden',
    alignItems: 'center',
    backgroundColor: 'orange',
    position: 'relative',
    margin: 10
  },

  image: {
    flex: 1
  }
})

レイアウト：

<TouchableOpacity 
  activeOpacity={ 0.75 }
  style={ styles.item }
>
  <Image
    style={ styles.image }
    resizeMode='contain'
    source={ temp }
  /> 
</TouchableOpacity>

結果（resizeMode='contain'）：

enter image description here

結果（resizeMode='cover'）：

enter image description here

ご覧のとおり、covered画像は非常に大きく、画面全体と同じ幅で、すぐに含まれるビューには収まりません。

更新1：

画像にスケール変換を適用し、中央から縮小することで、探しているものに近い結果を得ることができました。

変換：

transform: [{ scale: 0.55 }]

結果のレイアウト（マージンまたはパディングなし）： enter image description here

javascriptreactjsflexboxreact-native
21
BarakChamo

resizeModeのImageプロパティを使用してサンプルを動作させることはできませんでしたが、画像はすべて正方形であるため、フレックスボックスとともにウィンドウの寸法を使用してそれを行う方法があります。

flexDirection: 'row'、およびflexWrap: 'wrap'を設定すると、それらがすべて同じ次元である限り、すべて整列します。

設定しました ここ

https://snack.expo.io/HkbZNqjeZ

"use strict";

var React = require("react-native");
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  ScrollView
} = React;

var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
  render: function() {
    var images = [];

    for (var i = 0; i < 10; i++) {
      images.Push(
        <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
          <Image style={styles.image} source={{ uri: temp }} />
        </TouchableOpacity>
      );
    }

    return (
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          {images}
        </View>
      </ScrollView>
    );
  }
});
7
Nader Dabit

寸法をViewに設定し、以下の例のようにImageが高さと幅を'undefined'に設定してスタイル設定されていることを確認します。

    <View style={{width: 10, height:10 }} >
      <Image style= {{flex:1 , width: undefined, height: undefined}}    
       source={require('../yourfolder/yourimage')}
        />
    </View>

これにより、画像がスケーリングされ、ビューに完全に収まるようになります。

21
Naadiya Ahmed

たとえば、アスペクト比がわかっている場合、画像が正方形の場合、heightまたはwidthのいずれかを設定してコンテナを埋め、もう一方をaspectRatioプロパティ

heightを自動的に設定する場合のスタイルは次のとおりです。

{
    width: '100%',
    height: undefined,
    aspectRatio: 1,
}

注：heightはundefinedでなければなりません

14
sazzy4o

itemの幅と高さを指定しなかったからだと思います。

2つの画像を連続して表示する場合は、flexを使用する代わりに次のようなものを試すことができます。

item: {
    width: '50%',
    height: '100%',
    overflow: 'hidden',
    alignItems: 'center',
    backgroundColor: 'orange',
    position: 'relative',
    margin: 10,
},

これは私のために働く、それが役立つことを願っています。

3
user3685578