我试图显示5个沿水平轴等距分布{flexDirection: row, flex: 1}
的图像。如果我指定了高度和宽度,则图像显示得很好,但是我想避免这种情况。我引用了与此类似的其他问题,但没有一个解决方案起作用。更重要的是,我想了解到底发生了什么。
这是图像存放位置的快照:
这是我的组件:
import React from 'react-native';
const {
Component,
Text,
StyleSheet,
PropTypes,
View,
Image,
} = React;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
height: 100,
borderColor: '#FFbd00',
borderWidth: 3,
marginLeft: 20,
marginRight: 20,
marginBottom: 20,
padding: 5,
alignItems: 'stretch',
alignSelf: 'stretch',
justifyContent: 'center',
},
row: {
flex: 1,
alignSelf: 'stretch',
flexDirection: 'row',
},
column: {
flex: 1,
},
panel: {
padding: 5,
alignItems: 'center',
},
name: {
padding: 5,
borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth,
borderRightColor: '#bbb',
borderRightWidth: StyleSheet.hairlineWidth,
justifyContent: 'center',
},
spaces: {
padding: 5,
borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 32,
fontWeight: '300',
},
imagesContainer: {
flex: 1,
alignItems: 'stretch',
},
image: {
flex: 1,
width: null,
height: null,
},
});
export default class ParkingLotItem extends Component {
constructor(props, context){
super(props, context);
}
render() {
return (
<View pointerEvents='auto' style={styles.container}>
<View style={[styles.row, {flex: 1.5}]}>
<View style={[styles.column, styles.name, {flex: 2}]}>
<Text numberOfLines={1} style={styles.text}>{this.props.lot.name}</Text>
</View>
<View style={[styles.column, styles.spaces]}>
<Text numberOfLines={1} style={styles.text}>{this.props.lot.available}</Text>
</View>
</View>
<View style={styles.row}>
<View style={[styles.panel, styles.row]}>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
</View>
</View>
</View>
);
}
}
ParkingLotItem.propTypes = {
lot: PropTypes.shape({
name: PropTypes.string.isRequired,
available: PropTypes.number.isRequired,
}).isRequired,
};
这是图像和图像容器使用的代码:
imagesContainer: {
flex: 1,
alignItems: 'stretch',
},
image: {
flex: 1,
width: null,
height: null,
},
和....
<View style={[styles.panel, styles.row]}>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
<View style={styles.imagesContainer}><Image resizeMode={Image.resizeMode.contain} style={styles.image} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /></View>
</View>
我并不是真的100%清楚您的问题到底是什么,但是由于您是从网络中提取图像,因此需要设置高度和宽度,因为渲染器需要计算在视图中为其预留的空间。使用本地捆绑的图像,渲染器可以检索该信息本身,因此在这种情况下不需要高度和宽度。希望至少能解释原因。
请参阅react native文档中的Network Images。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句