flexDirection：“行”不起作用本机

Question

我正在开发一个本机应用程序。应用程序屏幕之一包含相册列表。我已将每个相册容器分为Card和CardSection组件。

一张卡可以包含许多CardSection。 CardSection将包含一个图像和2个Text标题。我面临的问题是Card flexDirection:'row'不能正常工作时在CardSection中放置内容。

这是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

Answer 1

Self您有错字，是Copyable，道具应该是extension ContentType where Self: Copyable { init(existingContentType: Self, newContentTypeId: String?) { self.init(contentTypeId: newContentTypeId) Self.copy(from: existingContentType, to: self) } } 。

Answer 2

使用此

headerContentStyle: {
     flexDirection: 'row',
     justifyContent: 'space-around'
}

代替

headerContentStyle: {
     flexDirection: 'column',
     justifyContent: 'space-around'
}

Answer 3

您必须在CardSection.js文件中使用卡片容器样式道具。 在那里，您必须使用flexDirection：'row'。 希望它能工作。

Answer 4

我遇到了类似的问题，其中flexDirection: 'row'不能在我要导入的App.js组件中工作。

造成这种情况的原因是我的alignItems: 'center'文件中主容器的样式表中的App.js。

我希望这对某人有帮助。