在 React Native 中调整图像大小 [英] Image resizing in React Native

问题描述

我正在尝试在我的 React Native 应用程序中调整图像大小(更小以适应屏幕)，但由于太大而无法做到.

I am trying to resize an image (smaller to fit screen) in my react native app but am unable to do it as it is too big.

代码如下:

'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>
    );
  }
} 

我试图将它从容器标签中取出，但似乎无法理解为什么它不能正确呈现?

I tried to take it out of the container tag but cannot seem to understand why it will not render properly?

这可以通过 flexbox resizeMode 来完成吗?你怎么做呢?我找不到关于它的任何文档...

Can this be done with flexbox resizeMode? How do you do it? I can't find any docs on it...

推荐答案

图像自动修复视图

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

这篇关于在 React Native 中调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！