在 React Native 中调整图像大小答案

【问题标题】：Image resizing in React Native在 React Native 中调整图像大小
【发布时间】：2015-06-11 03:20:49
【问题描述】：

我正在尝试在我的 react 本机应用程序中调整图像的大小（较小以适合屏幕），但由于太大而无法执行。

代码如下：

'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 来完成吗？你怎么做呢？我在上面找不到任何文档...

【问题讨论】：

这应该可以工作。将宽度更改为 100 时没有任何反应吗？另请查看github.com/facebook/react-native/blob/master/Libraries/Image/…，以了解有关可用属性的更多信息。
你试过resizeMode: 'cover'吗？
是的，resizeMode: 'cover' 没有任何反应。
npmjs.com/package/react-native-scalable-image
stackoverflow.com/questions/45187785/…的可能重复

标签： javascript reactjs react-native

【解决方案1】：

图像自动修复视图

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

【讨论】：

这导致我的图像消失了？ ?
图像需要在一个包装容器中，例如视图。在某些时候，您需要指定大小......
如果您使用的是 Typescript，请尝试使用 width: undefined 和 height: undefined 以防止出现类型错误。
这在 React Native 中对我有用。虽然我将 resizeMode 更改为“cover”。这用图像填满了整个屏幕。
这是完美的答案。我想这种方法对于比 View 更大的图像更好。

【解决方案2】：

我稍微调整一下你的答案（shixukai）

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

当我设置为 null 时，图像根本不会显示。我设置为特定大小，例如 50

【讨论】：

【解决方案3】：

这对我有用：

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

  }

纵横比只是宽度/高度（我的图像是 45px 宽 x 30px 高）。

【讨论】：

谢谢，这是唯一对我有用的解决方案。我有宽度和高度都为 flex-sized 的图像（以屏幕为界），直到我添加 aspectRatio，只有高度被正确调整，宽度是源图像宽度（即使父级有 alignItems：'stretch'） .
这是最好的解决方案。唯一对我有用的。
如何在图像周围添加边框？它在两边创造了大量的空白。

【解决方案4】：

在尝试了一些组合之后，我得到了这样的工作：

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

具体按照这个顺序。我希望这对某人有帮助。（我知道这是一个老问题）

【讨论】：

它对我有用，但没有width: null。谢谢！

【解决方案5】：

这对我有用：

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

只需要确保宽度和高度大于您的需要，因为它仅限于您设置的值。

【讨论】：

对我来说很棒。谢谢

【解决方案6】：

试试这个：（更多详情click here）

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

【讨论】：

【解决方案7】：

遇到了同样的问题，并且能够调整resize mode，直到找到我满意的东西。替代方法包括：

使用图像编辑器减小Static Resource 的大小
使用图像编辑器为静态资源添加透明边框
以牺牲用户体验为代价使用Network Resource

为防止在调整图像时质量下降，请考虑使用矢量图形，以便您可以轻松地尝试不同的尺寸。 Inkscape 是免费工具，非常适合此用途。

【讨论】：

【解决方案8】：

在我的例子中，我无法将 'width' 和 'height' 设置为 null，因为我使用的是 TypeScript。

我修复它的方法是将它们设置为“100%”：

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

【讨论】：

【解决方案9】：

这对我有用，

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 的所有组件中使用它，否则它与 height: 200, width: 220 是多余的。

【讨论】：

【解决方案10】：

我尝试了其他解决方案，但没有得到我想要的结果。这对我有用。

<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。对于我的组件，TouchableOpacity 是组件的根。

【讨论】：

【解决方案11】：

嘿，让您的图片具有响应性很简单：这是我写的一篇文章。 https://medium.com/@ashirazee/react-native-simple-responsive-images-for-all-screen-sizes-with-flex-69f8a96dbc6f

你可以简单地这样做，它会扩展

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>

【讨论】：

【解决方案12】：

使用 Resizemode 和 'cover' 或 'contain' 并设置图像的高度和 with。

【讨论】：

【解决方案13】：

{ flex: 1, resizeMode: 'contain' } 为我工作。我不需要 aspectRatio

【讨论】：

【解决方案14】：

为避免在使用 'contain' 调整大小时出现巨大的填充，请使用带有高度和 aspectRatio (that idea is from this answer) 的 'stretch'。

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

【讨论】：

【解决方案15】：

**设置图片的宽度和高度后，然后使用 resizeMode 属性，将其设置为覆盖或包含。以下代码块转换自普通 css 反应原生 StyleSheet

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

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

或对象适合包含

// In normal css

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

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

【讨论】：

【解决方案16】：

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

如果您在<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>

为您的视图提供所需的宽度和高度。

【讨论】：

【解决方案17】：

我得到了图像尺寸并将其设置为最大 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;
};

【讨论】：

【解决方案18】：

如果您知道宽高比，这是我的解决方案，您可以从图像元数据或先验知识中获得。这填满了屏幕的整个宽度，但当然可以调整。

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

这看起来比contain 好一点，并且对尺寸的微调更少，它会调整高度以保持适当的纵横比，这样您的图像就不会看起来歪斜。使用 contains 将保留纵横比，但会对其进行缩放以适应您的其他样式要求，这可能会大大缩小图像。

【讨论】：

非常糟糕，请自行尝试代码并粘贴