在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'
}

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

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

当我设置为null时，图像完全不会显示。我将尺寸设置为50

这对我有用：

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

  }

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

在尝试了一些组合之后，我可以像这样工作：

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

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

这对我有用：

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

只是需要确保宽度和高度大于所需的宽度，因为它受您的设置限制。

遇到同样的问题，并且能够调整调整大小模式，直到发现满意的地方。替代方法包括：

• 使用图像编辑器减小静态资源的大小
• 使用图像编辑器向静态资源添加透明边框
• 使用网络资源以牺牲UX为代价

为避免在调整图像时质量下降，请考虑使用矢量图形，以便您可以轻松地尝试不同的尺寸。Inkscape是免费工具，可以很好地实现此目的。

试试这个：（有关更多详细信息，请单击此处）

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

就我而言，我无法将'width'和'height'设置为null，因为我正在使用TypeScript。

我修复它的方法是将它们设置为“ 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的所有组件中使用它，否则，则多余height: 200, width: 220。

将Resizemode与'cover'或'contain'一起使用，并设置图像的高度和尺寸。

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

嗨，让您的图片具有响应能力很简单：这是我写的一篇文章。 https://medium.com/@ashirazee/react-native-simple-response-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>

**设定的宽度和图像的高度之后再使用resizeMode通过将其设置为覆盖或contain.The以下的代码块从正常翻译属性的CSS反应天然样式表

// 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";
 }

{ 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>

给您的视图所需的宽度和高度。

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

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

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

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

这看起来比更好contain，并且在尺寸上的调整较少，并且它将调整高度以保持适当的宽高比，从而使图像看起来不会歪斜。使用contain将保留长宽比，但将缩放比例以适合您的其他样式要求，这可能会大大缩小图像。