我试图以并排卡片式布局在屏幕上列出数据。简言之,我试图用html和css模拟的是float:left功能。其中每行包含两张卡,它们只是格式化的视图标记。出于某种原因,它们似乎以单列方式显示在屏幕下方,而不是左对齐。我的样式表有什么错,导致出现这种垂直对齐问题?
screen.js:
<View style={{flexDirection: 'row', backgroundColor: '#ffffff'}}>
<StatusBar translucent={false} barStyle="default" />
<FlatList
data={myList}
renderItem={({ item }) => (
<View style={style.outerContainer}>
<Image source={require('../../../../images/NoImageAvailable.png')} style={style.profileUrl} />
<TouchableHighlight onPress={onPress}>
<View style={style.textContainer}>
<Text style={style.mainHeading}>{item.name}</Text>
</View>
</TouchableHighlight>
</View>
)}
/>
</View>
style.js:
export default EStyleSheet.create({
outerContainer: {
width: 150,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 5,
marginRight: 5,
marginTop: 20,
borderWidth: 3,
borderColor: '#e9e9e9',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10
},
profileUrl: {
width: 120,
height: 120,
marginLeft: 10,
marginRight: 10,
marginTop: 10,
resizeMode: 'contain'
},
textContainer: {
width: 120,
height: 75,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: '#f8f8f8',
borderWidth: 3,
borderColor: '#e9e9e9',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10
},
mainHeading: {
fontSize: 16,
fontFamily: 'Arial',
fontWeight: '600'
},
bodyText: {
fontSize: 14,
fontFamily: 'Arial'
}
});