小能豆

在 React Native 中调整图像大小

javascript

我正在尝试在我的 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 来实现吗?您如何实现?我找不到任何相关文档…


阅读 51

收藏
2024-06-12

共1个答案

小能豆

图像自动修复视图

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

请注意,图像必须位于具有预定义大小的容器中才能正常工作

2024-06-12