我正在尝试在我的 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 来实现吗?您如何实现?我找不到任何相关文档…
图像自动修复视图
image: { flex: 1, width: null, height: null, resizeMode: 'contain' }
请注意,图像必须位于具有预定义大小的容器中才能正常工作