Javascript 在 React Native 中调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29476165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image resizing in React Native
提问by rahul2001
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.
我正在尝试在我的本机应用程序中调整图像大小（更小以适应屏幕），但由于它太大而无法做到。
Here is the code:
这是代码：
'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?
我试图将它从容器标签中取出，但似乎无法理解为什么它无法正确呈现？
Can this be done with flexbox resizeMode? How do you do it? I can't find any docs on it...
这可以用 flexbox resizeMode 来完成吗？你怎么做呢？我找不到任何关于它的文档...
回答by shixukai
image auto fix the View
图像自动修复视图
image: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain'
}
回答by Apit John Ismail
I adjust your answer a bit (shixukai)
我稍微调整一下你的答案（shixukai）
image: {
flex: 1,
width: 50,
height: 50,
resizeMode: 'contain' }
When I set to null, the image wont show at all. I set to certain size like 50
当我设置为 null 时，图像根本不会显示。我设置为特定大小，如 50
回答by GenericJam
This worked for me:
这对我有用：
image: {
flex: 1,
aspectRatio: 1.5,
resizeMode: 'contain',
}
aspectRatio is just width/height (my image is 45px wide x 30px high).
aspectRatio 只是宽度/高度（我的图像是 45px 宽 x 30px 高）。
回答by Henry Tiquet Leyva
After trying some combinations, I get this working like this:
在尝试了一些组合之后，我得到了这样的工作：
image: {
width: null,
resizeMode: 'contain',
height: 220
}
Specifically in that order. I hope this can be helpful for someone. (I know that is an old question)
具体按照这个顺序。我希望这对某人有帮助。（我知道这是一个老问题）
回答by Jamie Hall
This worked for me:
这对我有用：
image: {
flex: 1,
width: 900,
height: 900,
resizeMode: 'contain'
}
Just need to make sure that the width and height are bigger than you need as it is limited to what you set.
只需要确保宽度和高度大于您的需要，因为它仅限于您设置的内容。
回答by Josh Habdas
Ran into the same problem and was able to tweak the resize modeuntil I found something I was happy with. Alternative approaches include:
遇到了同样的问题，并且能够调整调整大小模式，直到找到我满意的东西。替代方法包括：
- Reduce the size of the Static Resourceusing an image editor
- Add a transparent border to the static resource using an image editor
- Use a Network Resourceat the expense of UX
To prevent loss of quality while tweaking images consider working with vector graphics so you can experiment with different sizes easily. Inkscape is free tool and works well for this purpose.
为了防止在调整图像时质量下降，请考虑使用矢量图形，以便您可以轻松地尝试不同的尺寸。Inkscape 是免费工具，可以很好地用于此目的。
回答by Анураг Пракаш
This worked for me,
这对我有用，
image: {
width: 200,
height:220,
resizeMode: 'cover'
}
You can also set your resizeMode: 'contain'. I defined the style for my network images as:
您还可以设置您的resizeMode: 'contain'. 我将网络图像的样式定义为：
<Image
source={{uri:rowData.banner_path}}
style={{
width: 80,
height: 80,
marginRight: 10,
marginBottom: 12,
marginTop: 12}}
/>
If you are using flex, use it in all the components of parent View, else it is redundant with height: 200, width: 220.
如果使用 flex，请在父 View 的所有组件中使用它，否则与height: 200, width: 220.
回答by Felipe Braz
In my case I could not set 'width' and 'height' to null because I'm using TypeScript.
就我而言，我无法将“宽度”和“高度”设置为 null，因为我使用的是 TypeScript。
The way I fixed it was by setting them to '100%':
我修复它的方法是将它们设置为“100%”：
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'cover',
}
回答by Sunil Tako
Try this: (for more details click here)
试试这个：（更多细节点击这里）
image: { flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }
回答by Pramod Mg
Use Resizemode with 'cover' or 'contain' and set the height and with of the Image.
使用 Resizemode 和 'cover' 或 'contain' 并设置图像的高度和 with。
