Reactjs 为React Native中的组件列表创建平面列表

我已经创建了一个组件，它本身由几个组件组成。现在所有这些组件都将动态获取数据，我需要多次重复这个主要组件。下面是要重复的组件的屏幕截图

彩色面板将有一些数据，标题和所有文本将动态更新

这是我到目前为止写的代码

     //FirstScreen.js
import React from 'react';

    import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
    import Icon  from 'react-native-vector-icons/Ionicons'
    import SquareCircle from './Square_circle_Button'
    import CirclePlus from './circle_plus'
    import DateComponent from './DateComponent'
    import LibraryComponent from './LibraryComponent'

        class FirstScreen extends React.Component
        {
          constructor(props) 
          {
            super(props);
          }

          render() {
            return <View style={{ flex: 1, flexDirection: "column" }}>
            <DateComponent DateDisplay={this.props.DDate}/>
                <View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
                <LibraryComponent Heading={this.props.send_heading} DisplayData={this.props.DData}/>
                </View>
              </View>;
          }
        }

    //LibraryComponent.js
import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";

export default class LibraryComponent extends React.Component
{
    render(){
        return <View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
            <View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
              <Text>{this.props.Heading}</Text>
            </View>

            <View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
              <Text>{this.props.DisplayData}</Text>
            </View>

            <View style={{ flex: 4, flexDirection: "row", alignContent: "center", justifyContent: "center" }}>
              <View style={{ width: 50, height: 50, backgroundColor: "powderblue" }} />
              <View style={{ width: 50, height: 50, backgroundColor: "skyblue" }} />
              <View style={{ width: 50, height: 50, backgroundColor: "steelblue" }} />
              <View style={{ width: 50, height: 50, backgroundColor: "gray" }} />
            </View>
          </View>;
    }
}

//DateComponent.js

import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";

export default class DateComponent extends React.Component
{
    render()
    {
        return(
            <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
  <Text>{this.props.DateDisplay}</Text>
        </View>);
    }

}

//TimeScroll.js

import React from 'react'
import {FlatList,View} from 'react-native'
import FirstScreen from './FirstScreen'
import CirclePlus from './circle_plus'
import AddCircle from './Square_circle_Button'


export default class Timeline extends React.Component
{
    render()
    {
        return(
            <FlatList style={{flex:1}}>
                data={[
                    {key:"20 Mar 2018"},
                ]}
                renderItem={({item}) =><View style={{flex:1}}>
                <FirstScreen send_heading={item.key} DData={item.key} DDate={item.key}/>
                </View>}
                <CirclePlus/>
                <AddCircle/>
                </FlatList>
        );
    }
}

//FirstScreen.js
从“React”导入React；
从“react native”导入{文本、样式表、视图、TouchableHighlight}；
从“反应本机矢量图标/Ionicons”导入图标
从“./Square\u circle\u按钮”导入SquareCircle
从“./circle\u plus”导入CirclePlus
从“./DateComponent”导入DateComponent
从“./LibraryComponent”导入LibraryComponent
类FirstScreen扩展了React.Component
{
建造师（道具）
{
超级（道具）；
}
render（）{
回来
;
}
}
//LibraryComponent.js
从“React”导入React；
从“react native”导入{文本、样式表、视图、TouchableHighlight}；
导出默认类LibraryComponent扩展React.Component
{
render（）{
回来
{this.props.Heading}
{this.props.DisplayData}
;
}
}
//DateComponent.js
从“React”导入React；
从“react native”导入{文本、样式表、视图、TouchableHighlight}；
导出默认类DateComponent扩展React.Component
{
render（）
{
返回(
{this.props.DateDisplay}
);
}
}
//TimeScroll.js
从“React”导入React
从“react native”导入{FlatList，View}
从“./FirstScreen”导入FirstScreen
从“./circle\u plus”导入CirclePlus
从“./Square\u circle\u按钮”导入AddCircle
导出默认类Timeline扩展React.Component
{
render（）
{
返回(
资料={[
{关键字：“2018年3月20日”}，
]}
renderItem={（{item}）=>
}
);
}
}

---

如果需要，请告诉我如何修改结构以正确完成此任务。

您只需将道具数据结构为对象数组，其中每个对象都有每个调色板的数据：

//FirstScreen.js
import React from 'react';

import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
import Icon  from 'react-native-vector-icons/Ionicons'
import SquareCircle from './Square_circle_Button'
import CirclePlus from './circle_plus'
import DateComponent from './DateComponent'
import LibraryComponent from './LibraryComponent'

class FirstScreen extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    renderColorPalettes = () => {
        const { colorData } = this.props;

        return colorData.map( palette => {
            return <LibraryComponent Heading={palette.heading} DisplayData={palette.data}/>
        });
    };

    render() {
        const colors = renderColorPalettes();
        return <View style={{ flex: 1, flexDirection: "column" }}>
            <DateComponent DateDisplay={this.props.DDate}/>
            <View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
                {colors}
            </View>
        </View>;
    }
}

//FirstScreen.js
从“React”导入React；
从“react native”导入{文本、样式表、视图、TouchableHighlight}；
从“反应本机矢量图标/Ionicons”导入图标
从“./Square\u circle\u按钮”导入SquareCircle
从“./circle\u plus”导入CirclePlus
从“./DateComponent”导入DateComponent
从“./LibraryComponent”导入LibraryComponent
类FirstScreen扩展了React.Component
{
建造师（道具）
{
超级（道具）；
}
渲染颜色调色板=（）=>{
const{colorData}=this.props；
返回colorData.map（调色板=>{
回来
});
};
render（）{
const colors=renderColorPalettes（）；
回来
{colors}
;
}
}