Question

我需要在render（）{return（...）;}函数中显示两张卡，但是我只输出一张卡；通过评论其中一张卡片，它们可以很好地显示，但不能同时显示两个卡片。我该怎么办？

class AboutUs extends Component {

    constructor(props) {
        super(props);
        this.state = {
            leaders: LEADERS
        };
    }

    static navigationOptions = {
        title: 'About Us'
    };


    render() {
        const renderLeader = ({item, index}) => {

            return (
                    <ListItem
                        key={index}
                        title={item.name}
                        subtitle={item.description}
                        hideChevron={true}
                        leftAvatar={{ source: require('./images/alberto.png')}}
                      />

            );
        }

        return (
             <Card title={'Our History'}>
                     <Text>
                         Hong Kong.  s.
                     </Text>

                     <Text>{"\n"}
                         The restaurant traces 
             </Card>,

            <Card title={'Corporate Leadership'}>
                <FlatList 
                    data={this.state.leaders}
                    renderItem={renderLeader}
                    keyExtractor={item => item.id.toString()}
                />
            </Card>
    );
    }
}

export default AboutUs;

Answer 1

您需要用一些东西包装您的组件，我在下面使用React.Fragment。为什么要使用逗号？

  return (
    <>
     <Card title={'Our History'}>
      <Text>
         Hong Kong.  s.
      </Text>
     <Text>
        {"\n"}The restaurant traces 
     </Text>
     </Card>
     <Card title={'Corporate Leadership'}>
        <FlatList 
           data={this.state.leaders}
           renderItem={renderLeader}
           keyExtractor={item => item.id.toString()}
        />
     </Card>
    </>);

Answer 2

尝试一下：

class AboutUs extends Component {

    constructor(props) {
        super(props);
        this.state = {
            leaders: LEADERS
        };
    }

    static navigationOptions = {
        title: 'About Us'
    };


    render() {
        const renderLeader = ({item, index}) => {

            return (
                    <ListItem
                        key={index}
                        title={item.name}
                        subtitle={item.description}
                        hideChevron={true}
                        leftAvatar={{ source: require('./images/alberto.png')}}
                      />

            );
        }

        return (
             <>
             <Card title={'Our History'}>
                     <Text>
                         Hong Kong.  s.
                     </Text>

                     <Text>{"\n"}
                         The restaurant traces 
                     </Text>
             </Card>

            <Card title={'Corporate Leadership'}>
                <FlatList 
                    data={this.state.leaders}
                    renderItem={renderLeader}
                    keyExtractor={item => item.id.toString()}
                />
            </Card>
    </>);
    }
}

export default AboutUs;

Answer 3

我通过使用ScrollView包装卡来解决此问题：谢谢大家的建议

            <ScrollView>
                <Card title={'Our History'}>
                        <Text>
                            Started in 2010, 
                        </Text>
                        <Text>{"\n"}
                            The restaurant n.
                        </Text>
                </Card>

                <Card title={'Corporate Leadership'}>
                    <FlatList 
                        data={this.state.leaders}
                        renderItem={renderLeader}
                        keyExtractor={item => item.id.toString()}
                    />
                </Card>
            </ScrollView>  
            );

我想在“关于组件”上显示两个卡片，但一次不能显示两个卡片

3 个答案: