图像在React Native中调整大小

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只是宽度/高度(我的图像是45px宽x 30px高).

Answer 4

尝试了一些组合后,我得到这样的工作:

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

特别是按顺序.我希望这对某人有帮助.(我知道这是一个老问题)

Answer 5

试试这个：（更多细节点击这里）

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

Answer 6

遇到同样的问题,能够调整调整大小模式,直到找到我满意的东西.替代方法包括:

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

为了防止在调整图像时丢失质量,请考虑使用矢量图形,以便您可以轻松地尝试不同的尺寸.Inkscape是免费工具,可以很好地实现此目的.

Answer 7

这为我工作：

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

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

Answer 8

就我而言，我无法将“宽度”和“高度”设置为 null，因为我使用的是 TypeScript。

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

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

Answer 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.

Answer 10

嘿，让你的图像响应很简单：\n这是我写的一篇关于它的文章。\n https://medium.com/@ashirazee/react-native-simple-responsive-images-for-all-screen-size- with-flex-69f8a96dbc6f

\n

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

\n

\r\n

\r\n

container: {\n    width: 200,\n    height: 220\n  },// container holding your image \n\n\n  image: {\n    width: \'100%\',\n    height: \'100%\',\n    resizeMode: cover,\n  },\n});

\r\n

\r\n

\r\n

\n

这是因为保存图像的容器决定了高度和宽度，因此通过使用百分比，您将能够使图像响应所有屏幕尺寸。

\n

这是另一个例子：

\n

\r\n

\r\n

<View style={{\nwidth: 180,\nheight: 200,\naspectRatio: 1 * 1.4,\n}}>\n<Image\nsource={{uri : item.image.url}}\nstyle={{\nresizeMode: \xe2\x80\x98cover\xe2\x80\x99,\nwidth: \xe2\x80\x98100%\xe2\x80\x99,\nheight: \xe2\x80\x98100%\xe2\x80\x99\n}}\n/>\n</View>

\r\n

\r\n

\r\n

\n

Answer 11

为了避免使用调整大小时出现巨大的填充'contain'，请使用'stretch'高度和aspectRatio（这个想法来自这个答案）。

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