之前已经：
【已解决】ReactNative中如何在View中添加图片图标
可以显示图片了：
但是很明显，那个H图标，太大了。希望可以自定义显示宽和高，或者是自动适配大小区域。
参考：
javascript – Trouble requiring image module in React Native – Stack Overflow
“bg: {
width: 400,
height: 300,
alignSelf: ‘auto’,
},”
去试试：
alignSelf
react native image alignSelf
Center an image? · Issue #384 · facebook/react-native · GitHub
[Image] Maintaining Aspect Ratio of <Image> · Issue #858 · facebook/react-native · GitHub
在父一级的视图中加上：
justifyContent: ‘center’,
alignItems: ‘center’,
变成：
customerRow:{ flex: 1, flexDirection: ‘row’, height: 30, justifyContent: ‘center’, alignItems: ‘center’, }, |
然后的确就居中显示图片了：
然后再去限制图片宽和高：
intentionLevel: { paddingLeft: 10, width: 20, height: 20, }, |
即可正常显示想要的效果了：
【总结】
此处，想要图片，居中显示的话，则是，在其父一级的视图中，加上：
justifyContent: ‘center’, alignItems: ‘center’, |
比如：
<View style={styles.customerRow}> <Image style={styles.intentionLevel} source={require(‘./img/customerLevel_H.png’)} /> <Text style={styles.customerName}>{rowData.customerName}</Text> <Text style={styles.intentionCar}>{rowData.intentionCar}</Text> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> const styles = StyleSheet.create({ customerRow:{ flex: 1, flexDirection: ‘row’, height: 30, justifyContent: ‘center’, alignItems: ‘center’, }, } |
即可正常显示图片，居中对齐了。
转载请注明：在路上 » 【已解决】ReactNative中如何实现图片缩放自动适配显示