在React Native中调整图像大小

JavaScript React.js

小宇宙Near

2020-03-19

我正在尝试在我的本机应用程序中调整图像尺寸(缩小以适合屏幕尺寸),但由于尺寸太大而无法执行。

这是代码:

'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完成此操作吗?你怎么做呢?我找不到关于它的任何文档...

第2316篇《在React Native中调整图像大小》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
木禾 2020.03.19

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android