在 React Native 中调整图像大小

IT技术 javascript reactjs react-native
2021-04-12 11:16:14

我正在尝试在我的本机应用程序中调整图像的大小（更小以适应屏幕），但由于它太大而无法做到。

这是代码：

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

6个回答

图像自动修复视图

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
}
如果你在typescript，尝试width: undefined并height: undefined转而防止类型错误。
2021-05-27 11:16:14
这在 React Native 中对我有用。虽然我将 resizeMode 更改为 'cover'。这用图像填充了整个屏幕。
2021-06-03 11:16:14
这是完美的答案。我想这种方法对于比视图更大的图像更好。
2021-06-06 11:16:14
这导致我的图像消失？🤔
2021-06-07 11:16:14
图像将需要位于包装容器中，例如视图。在某些时候，您需要指定一个大小....
2021-06-17 11:16:14

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

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

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

这对我有用：

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

  }

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

这是最好的解决方案。唯一对我有用的。
2021-06-03 11:16:14
谢谢，这是唯一对我有用的解决方案。我有宽度和高度都是 flex 大小的图像（受屏幕限制），直到我添加了 aspectRatio，只有高度被正确调整大小，宽度是源图像宽度（即使父级有 alignItems: 'stretch'） .
2021-06-10 11:16:14
您如何在图像周围应用边框来执行此操作？它在两侧创造了大量的空白。
2021-06-13 11:16:14

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

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

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

它对我有用，但没有width: null. 谢谢！
2021-05-27 11:16:14

这对我有用：

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

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

伟大的为我工作。谢谢
2021-06-17 11:16:14
其它你可能感兴趣的问题
上一篇将对象作为props传递给 jsx 下一篇渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null