Saya sedang mengembangkan aplikasi reaksi-asli. Salah satu layar aplikasi berisi daftar album. Saya telah membagi setiap wadah album menjadi beberapa komponen yaitu Card dan CardSection.
Sebuah Kartu dapat berisi banyak Bagian Kartu. CardSection akan berisi gambar dan 2 judul Teks. Masalah yang saya hadapi adalah pemosisian konten di CardSection karena flexDirection:'row'
tidak berfungsi.
Ini CardSection.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {
// destructing the props
const {title, artist, thumbnail_image} = album;
return (
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
</View>
<View style={styles.headerContentStyle} >
<Text style={styles.headerTextStyle}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle:{
fontSize:18
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
margin: 10,
marginRight: 10
}
};
export default AlbumDetail;
Ini CardSection.js
import React from 'react';
import {View} from 'react-native';
const CardSection = (props) => {
return (
<View styles={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: "row",
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
Hasilnya adalah Gambar yang diletakkan di sebelah kiri dan kanan gambar akan ada 2 Judul Teks dan FlexDirectionnya adalah column