react-native - 전체 화면 크기가 아닌 View를 포함하는 이미지에 맞춥니다.

react-native - 전체 화면 크기가 아닌 View를 포함하는 이미지에 맞춥니다.

이미지를 포함한 뷰에 맞추어 심리스한 그리드를 만들 수 있도록 하고 있습니다.문제는 말이다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'):

결과(와 함께)resizeMode='cover'):

보다시피covered 이미지는 매우 크고 화면 전체만큼 넓어서 바로 포함하는 보기에 맞지 않습니다.

업데이트 1:

이미지에 스케일 변환을 적용하여 중심에서 축소함으로써 원하는 결과를 얻을 수 있었습니다.

전환:

transform: [{ scale: 0.55 }]

결과 레이아웃(여백 또는 패딩 없음):

예를 들어 가로 세로 비율을 알고 있는 경우 이미지가 정사각형일 경우height또는width컨테이너를 채우고 다른 컨테이너를 세팅합니다.aspectRatio소유물

여기 당신이 원하는 스타일이 있습니다.height자동으로 설정됩니다.

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

주의:height야 한다.undefined

편집(@rob-art 코멘트 기준):
이미지의 가로 세로 비율이 사용할 수 있는 스타일과 다른 경우resizeMode이미지를 표시하는 방법을 제어합니다.사용하다resizeMode:'contain'이미지를 잘라내지 않도록 합니다.
상세한 것에 대하여는, 메뉴얼을 참조해 주세요.

치수를 [View](보기)로 설정하고 아래 예시와 같이 이미지의 높이와 폭을 [undefined](정의되지 않음)으로 설정했는지 확인합니다.

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

이렇게 하면 이미지가 확장이 되고 뷰에 완벽하게 맞도록 할 수 있습니다.

여기에 있는 모든 사용자가 자르지 않고 전체 화면에 이미지를 맞추려면(세로 및 가로 모드 모두) 다음을 사용하십시오.

image: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'contain',
},

를 사용하여 작업하는 예를 얻을 수 없었습니다.resizeMode의 속성Image단, 이미지는 모두 정사각형이기 때문에 창의 [Dimensions](치수)와 플렉스박스를 사용하는 방법이 있습니다.

세트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>
    );
  }
});

간단히 크기 조정을 통과해야 합니다.이러한 모드는 포함 뷰에서 이미지에 맞도록 합니다.

<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>

const style = StyleSheet.create({
  imageStyle: {
      alignSelf: 'center',
      height:'100%', 
      width:'100%'
    },]
})

가로폭과 세로높이를 지정하지 않으셨기 때문에item.

2개의 이미지만 연속해서 표시하려면 flex를 사용하는 대신 다음과 같은 방법을 사용할 수 있습니다.

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

나한테는 잘 먹히는데 도움이 됐으면 좋겠는데.

이건 나한테 효과가 있어

<Image style={styles.imageStyle} resizeMode="cover" source={imageSource} />

const styles = StyleSheet.create({
  imageStyle: {
    width: undefined,
    height: '100%',
    aspectRatio: 1,
    alignSelf: 'center',
  },
});

이미지 배율을 항상 수정하는 "Resize Matters(크기 조정)" 라이브러리를 사용할 수 있습니다.

import { scale, verticalScale } from 'react-native-size-matters';

export const Component = props =>
    <Image style={{
        width: scale(30),
        height: verticalScale(50)
    }}/>;

여기에서는 만족하실 수 있습니다.https://github.com/nirsky/react-native-size-matters

이미지에는 Style이라는 속성이 있으며(대부분의 리액트 네이티브 컴포넌트와 마찬가지로), Image의 Style에는 resize라는 속성이 있습니다.contain, cover, stretch, center, repeat 등의 값을 사용하는 모드

대부분 당신이 센터를 이용한다면 그것은 당신에게 도움이 될 것이다.

언급URL : https://stackoverflow.com/questions/34180629/react-native-fit-image-in-containing-view-not-the-whole-screen-size