0
サイドバイサイドのカードスタイルのレイアウトで画面にデータを表示しようとしています。一言で言えば、私は浮動小数点数をシミュレートしようとしています：htmlとcssの左の能力。各行に2つのカードが含まれています。これは、フォーマットされたViewタグです。何らかの理由で、左揃えの画面を一列に表示するように見えます。この垂直配置の問題を発生させるために、自分のスタイルシートに何が間違っているのですか？私はあなたがそうならばサイドでフラットリスト側の二つの項目を設定しようとしている理解して何からフラットリストのネイティブレイアウトの書式設定
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'
}
});