React native 需要创建一个显示阵列列表的设计

我想在下面创建一个设计，在设计中，“控制器详细信息”是我要显示的阵列列表，例如可以有10个控制器或15个控制器，请让我知道如何创建，因为我是新手

---

最终输出：

没有什么要解释的，只是一点点CSS样式

还有一点，我不知道快照中使用的字体，所以我使用默认字体

稍后根据您的用户界面进行更改

以下是完整的代码：

导出默认函数App（）{
const[persons，setPersons]=使用状态（personData）；
const renderInfoCard=（数据）=>{
返回(
董事/合伙人详情
{
返回(
{item.post}
{item.name}
);
}}
/>
);
};
返回{renderInfoCard（persons）}；
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“开始”，
paddingTop:Constants.statusBarHeight，
背景颜色：“白色”，
填充：8，
},
标题：{
尺寸：15，
容重：“500”，
textAlign:'开始'，
marginLeft:15，
marginBottom:5，
玛金托普：10，
},
});
常数personData=[
{
id:1，
职位:"导演1",，
姓名：'约翰'，
},
{
id:2，
职位:"导演2",，
姓名：'布鲁斯'，
},
{
id:3，
职位:"三级导演",，
姓名：'克拉克'，
},
{
id:4，
职位:"导演4",，
姓名：'彼得'，
},
{
id:5，
职位:"五主任",，
姓名：“托尼”，
},
];

您可以在此处使用工作示例：