Question

我正在尝试调整我的反应原生应用中的图像（较小以适应屏幕），但由于它太大而无法执行此操作。

以下是代码：

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

Answer 1

图片自动修复视图

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

Answer 2

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

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

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

Answer 3

这对我有用：

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

  }

aspectRatio只是宽度/高度（我的图像宽45像素x高30像素）。

Answer 4

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

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

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

Answer 5

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

使用图像编辑器缩小Static Resource的大小
使用图像编辑器
使用Network Resource而牺牲UX

为了防止在调整图像时质量下降，请考虑使用矢量图形，这样您就可以轻松地尝试不同的尺寸。 Inkscape是免费的工具，可以很好地用于此目的。

Answer 6

这对我有用：

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

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

Answer 7

这对我有用，

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

Answer 8

使用Resizemode＆＃39; cover＆＃39;或者＆＃39;包含＆＃39;并设置图像的高度和高度。

Answer 9

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

<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 是组件的根。

Answer 10

让您的图片具有响应性很简单：这是我写的一篇文章。 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>

Answer 11

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

Answer 12

from django.db.models import Q

query = Q(id__in=table2.objects.filter(your_condition).values_list('id'))
table1.objects.filter(~query)

如果您在{ flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }的样式道具中使用这些属性，则图像会消失。

将图像放入<Image />标签中。像这样：

<View>

提供所需的宽度和高度。

Answer 13

**设置图像的宽度和高度后，使用 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";
 }

Answer 14

尝试一下：（有关更多详细信息，click here）

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

Answer 15

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

Answer 16

由于我使用的是TypeScript，因此我无法将'width'和'height'设置为null。

我修复该问题的方法是将它们设置为“ 100％”：

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

Answer 17

您可以使用react native可缩放图像

https://www.npmjs.com/package/react-native-scalable-image

  import Image from 'react-native-scalable-image';


     <View style={{width:200,height:200,overflow:'hidden'}}>
        <Image
          width={200} // height will be calculated automatically
          source={{uri: '<image uri>'}}
         />
     </View>

Answer 18

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

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

这看起来比contain好一些，并且对尺寸的影响较小，并且会调整高度以保持适当的宽高比，这样您的图像就不会显得偏斜。使用contains将保留纵横比，但会缩放它以适应您的其他样式要求，这可能会大幅缩小图像。

图像在React Native中调整大小

18 个答案: