如何让本机图像适合图像宽度和高度 [英] How to get the react native image to fit to the Image width and height

问题描述

在我使用的 react-native Image 中，我根据屏幕的尺寸设置了宽度和高度.现在，当我设置图像源时，不会显示整个图像.我尝试了 resizeMode 和 resizeMethod 属性，但仍然无法正常工作.我怎样才能做到这一点?

In the react-native Image I use, I set the width and height according to the dimensions of the screen. Now when I set an image source, the whole image is not displayed. I tried resizeMode and resizeMethod properties, but still it doesn't work properly. How can I achieve this?

import React, { Component } from "react";
import {
  View,
  Text,
  Image,
  Animated,
  ScrollView,
  StyleSheet,
  Dimensions
} from "react-native";

import { PostProfileBar } from "../../component";

const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height / 3;

class SharePostScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      profile: {
        avatar:
          "https://img.bleacherreport.net/img/images/photos/003/733/498/hi-res-0579e42e6ee662e306e09bcf17d72dc4_crop_north.jpg?h=533&w=800&q=70&crop_x=center&crop_y=top",
        first_name: "Sarah",
        last_name: "Williams"
      }
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.sharePostWrapper}>
          <ScrollView>
            <PostProfileBar profile={this.state.profile} />
            <Image
              source={{
                uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
              }}
              resizeMode={'cover'}
              style={styles.image}
            />
          </ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  sharePostWrapper: {
    flex: 1,
    margin: 5,
    padding: 5,
    borderWidth: 0.5,
    borderColor: 'gray',
  },
  image: {
    marginTop: 4,
    width: width - 20,
    height: height
  }
});

export default SharePostScreen;

推荐答案

您需要使用 图片如下图

You need to use the Image in the following way

   <Image
    source={{
        uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
    }}
    resizeMode={'stretch'}
    style={styles.image}
/>

resizeModes您可能需要的是 cover、stretch、repeat(仅限 IOS)

要显示整个图像，大多数情况下需要更改纵横比，因此可以使用resizeMode:stretch

To display the entire image, aspect ratio needs to be changed for most of the cases, therefore, you may use resizeMode: stretch

这篇关于如何让本机图像适合图像宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！