React Native 이미지 크기 조정

React Native 이미지 크기 조정

리액트 네이티브 앱에서 이미지 크기(화면 크기에 맞게 작게)를 조정하려고 하는데 너무 커서 할 수 없습니다.

코드는 다음과 같습니다.

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC'
  },
  image: {
    width: 200,
    height: 220
  },
});

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Image source={require('image!rclogo')} style={styles.image}/>

        <Text style={styles.description}>
          Search for RCers!
        </Text>

        <Text style={styles.description}>
          Search
        </Text>

        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            placeholder='Search by Batch, Name, Interest...'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>

        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>

      </View>
    );
  }
} 

컨테이너 태그에서 꺼내려고 했는데 왜 제대로 렌더링되지 않는지 이해할 수 없는 것 같습니다.

Flexbox resizeMode를 사용하여 이 작업을 수행할 수 있습니까?어떻게 하는 거야?어떤 문서도 찾을 수 없어요

이미지 보기 자동 수정

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

당신의 답변을 조금 조정했습니다(시스카이).

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

null로 설정하면 이미지가 전혀 표시되지 않습니다.50 사이즈로 세팅했습니다.

이 방법은 효과가 있었습니다.

image: {
    flex: 1,
    aspectRatio: 1.5, 
    resizeMode: 'contain',

  }

aspect Ratio는 가로/세로입니다(이미지는 가로 45px 세로 30px).

몇 가지 조합을 시도하면 다음과 같이 동작합니다.

image: {
    width: null,
    resizeMode: 'contain',
    height: 220
}

특히 그 순서로요.이게 누군가에게 도움이 됐으면 좋겠어요.(그것은 오래된 질문인 것을 알고 있습니다)

시험해 보세요: (자세한 내용은 여기를 클릭)

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

이 방법은 효과가 있었습니다.

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

폭과 높이는 설정한 범위로 한정되어 있기 때문에, 필요한 것보다 큰 것을 확인해 주세요.

같은 문제가 발생하여 마음에 드는 것을 찾을 때까지 크기 조정 모드를 조정할 수 있었습니다.대체 접근법에는 다음이 포함됩니다.

• 이미지 편집기를 사용하여 정적 리소스 크기 축소
• 이미지 편집기를 사용하여 정적 리소스에 투명 테두리 추가
• UX를 희생하여 네트워크 리소스 사용

이미지를 조정하는 동안 품질 손실을 방지하려면 벡터 그래픽을 사용하여 다른 크기를 쉽게 실험해 보십시오.Inkscape는 무료 도구이며 이러한 용도로 잘 작동합니다.

내 경우 TypeScript를 사용하고 있기 때문에 'width'와 'height'를 null로 설정할 수 없습니다.

수정 방법은 '100%'로 설정했습니다.

backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',        
}

이건 나한테 효과가 있었어

image: {
    width: 200,
    height:220,
    resizeMode: 'cover'
}

또, 다음의 설정을 실시할 수도 있습니다.resizeMode: 'contain'네트워크 이미지의 스타일을 다음과 같이 정의했습니다.

<Image 
   source={{uri:rowData.banner_path}}
   style={{
     width: 80,
     height: 80,
     marginRight: 10,
     marginBottom: 12,
     marginTop: 12}}
/>

Flex를 사용하는 경우 상위 View의 모든 컴포넌트에서 Flex를 사용합니다.그렇지 않으면 Flex는height: 200, width: 220.

이미지를 반응시키는 것은 간단하다: 여기 내가 그것에 대해 쓴 기사가 있다.https://medium.com/@ashirazee/filename-filename-filename-responsive-filename-filename-filename-filename-filename-filename-filename-filename-filename-f

이렇게 하면 확장이 가능합니다.

container: {
    width: 200,
    height: 220
  },// container holding your image 


  image: {
    width: '100%',
    height: '100%',
    resizeMode: cover,
  },
});

이미지를 보관하는 용기가 높이와 폭을 결정하므로 백분율을 사용하여 모든 화면 크기에 이미지를 반응시킬 수 있습니다.

다음은 또 다른 예입니다.

<View style={{
width: 180,
height: 200,
aspectRatio: 1 * 1.4,
}}>
<Image
source={{uri : item.image.url}}
style={{
resizeMode: ‘cover’,
width: ‘100%’,
height: ‘100%’
}}
/>
</View>

시 큰 ""를 사용합니다.'contain'하다, 사용하다'stretch'키와 키를 가지고aspectRatio(그 아이디어는 이 답변에서 나온 것입니다).

{ height: '20%', aspectRatio: 1, resizeMode: 'stretch' }

다른 솔루션을 시도해 봤지만 원하는 결과를 얻지 못했습니다.난 이거면 돼.

<TouchableOpacity onPress={() => navigation.goBack()} style={{ flex: 1 }}>
        <Image style={{ height: undefined, width: undefined, flex: 1 }}
            source={{ uri: link }} resizeMode="contain"
        />
</TouchableOpacity>

주의: 이것을 css가 아닌 이미지 태그 속성으로 설정해야 했습니다.

resizeMode="contain"

또한 부모 컨테이너에서 flex:1을 설정해야 합니다.내 컴포넌트의 경우 Touchable Opacity는 컴포넌트의 루트입니다.

{ flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }

을 타 prop prop prop <Image />이미지가 사라집니다.

를 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」<View>아아아아아아아아아아아아아아아아아아악

<View 
  style={{
      width: '100%',
     height: '30%'
     }}
>
          <Image
            source={require('../logo.png')}
            style={{
              flex: 1,
              height: undefined,
              width: undefined,
              resizeMode: 'contain'
            }}
            resizeMode={'cover'}
          />
</View>

시야에 원하는 폭과 높이를 제공하십시오.

크기 조정은 '커버' 또는 '컨테인'과 함께 사용하고 이미지의 높이와 를 설정합니다.

{ flex: 1, resizeMode: 'contain' }나는 aspect Ratio가

**이미지의 폭과 높이를 설정한 후 크기 조정 사용cover 또는 contain으로 설정하여 속성을 모드화합니다.다음 코드 블록은 일반 css에서 react-native StyleSheet로 변환됩니다.

// In normal css
.image{
   width: 100px;
   height: 100px;
   object-fit: cover;
 }

// in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "cover";
 }

OR 객체 맞춤 포함

// In normal css

.image{
   width: 100px;
   height: 100px;
   object-fit: contain;
 }

 // in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "contain";
 }

이것은 나에게 효과가 있었다.

height: undefined,
width: undefined,
flex: 1,
resizeMode: "contain",

보기 내에서 이미지를 flex:1로 줄 바꿈

이미지 Size를 받아서 최대 폭 130, 높이 30으로 설정했습니다.

const [imageSize, setImageSize] = useState();
Image.getSize(url, (width, height) => {
      setImageSize(logoSize(width, height));
});
...
<Image style={imageSize ?? initialSize} source={{uri: url}} />
...


const logoSize = (width, height) => {
  var maxWidth = 110;
  var maxHeight = 30;

  if (width >= height) {
    var ratio = maxWidth / width;
    var h = Math.ceil(ratio * height);

    if (h > maxHeight) {
      // Too tall, resize
      var ratio = maxHeight / height;
      var w = Math.ceil(ratio * width);
      var ret = {
        width: w,
        height: maxHeight,
      };
    } else {
      var ret = {
        width: maxWidth,
        height: h,
      };
    }
  } else {
    var ratio = maxHeight / height;
    var w = Math.ceil(ratio * width);

    if (w > maxWidth) {
      var ratio = maxWidth / width;
      var h = Math.ceil(ratio * height);
      var ret = {
        width: maxWidth,
        height: h,
      };
    } else {
      var ret = {
        width: w,
        height: maxHeight,
      };
    }
  }

  return ret;
};

이미지 메타데이터 또는 사전 지식에서 얻을 수 있는 애스펙트 비율을 알고 있는 경우의 솔루션을 다음에 나타냅니다.이것은 화면의 전체 폭을 채웁니다만, 물론 조정할 수 있습니다.

function imageStyle(aspect)
{
    //Include any other style requirements in your returned object.
    return {alignSelf: "stretch", aspectRatio: aspect, resizeMode: 'stretch'}
} 

보다 더 잘 요.contain사이즈에 따라 세세한 부분까지 줄일 수 있습니다.또, 적절한 애스펙트비가 유지되도록 높이를 조정해, 이미지가 일그러져 보이지 않게 합니다.Contain을 사용하면 가로 세로 비율은 유지되지만 다른 스타일 요건에 맞게 크기가 조정되므로 이미지가 크게 축소될 수 있습니다.

언급URL : https://stackoverflow.com/questions/29476165/image-resizing-in-react-native