小编Ati*_*ved的帖子

我正在开发一个react-native应用程序.其中一个应用程序屏幕包含一个专辑列表.我将每个相册容器分成了Card和CardSection的组件.

卡可以包含许多CardSections.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, …