0
화면에 데이터를 나란히 배치하려는 카드 스타일 레이아웃. 간단히 말해서, 나는 떠돌아 다니는 것을 시뮬레이션하려고합니다 : html과 css가있는 왼쪽 기능. 각 행에는 두 개의 카드가 들어 있는데,이 카드는 단지 형식화 된보기 태그입니다. 웬일인지, 그들은 왼쪽 열에 정렬하여 왼쪽 아래로 한 줄로 표시하는 것처럼 보입니다. 이 세로 정렬 문제를 발생시키기 위해 스타일 시트를 잘못 사용하면 어떻게됩니까?FlatList의 React-Native 레이아웃 형식
난 당신이 그렇다면 옆에 평면 목록 측의 두 항목을 설정하려는 이해하는 것과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'
}
});