Я разрабатываю приложение, основанное на реакции. Один из экранов приложений содержит список альбомов. Я разделил каждый контейнер альбома на компоненты, которые являются Card и CardSection.
Карта может содержать много карточных разделов. CardSection будет содержать изображение и 2 заголовка текста. Проблема, с которой я столкнулась, заключается в позиционировании содержимого в CardSection, поскольку flexDirection:'row'
не работает.
Вот 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;
Вот 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;
В результате изображение, помещенное влево и в правой части изображения, будет содержать 2 заголовка текста и их flexDirection будет column
<View styles={styles.containerStyle}>
у вас есть опечатка, этоstyles
, prop должен бытьstyle
.containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' }
используйте
вместо
containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: "row", borderColor: '#ddd', position: 'relative' }