React native 如何添加<；文本>；在通过数据库获取数据的FlatList之前

我从数据库中获取数据，该数据库包含客户详细信息，然后是客户财产列表和每个财产的信息。我可以让FlatList显示属性列表，但我想显示的是客户详细信息，等等，然后FlatList显示属性详细信息。如何从数组中提取客户端详细信息，并首先显示它，然后显示属性的详细信息

数组的eg是这样的

[{'id'：“90”、'clientname'：“客户名称”、'balance'：“10000”、{'propid'：“80”、propname:'物业名称'、'出租'：'出租'、'租金'：'10000'}、{'propid'：“70”、propname:'物业名称2'、'出租'：'未出租'、'租金'：'4000'}]

<Text>{clientname}</Text><Text>Your Balance {balance}</Text>

<FlatList>......<FlatList>

{clientname}您的余额{Balance}
......

正如我提到的，我可以正确显示属性平面列表。我无法得到的是显示特定于客户端的详细信息

更新：

感谢那些试图帮助我的人，但这对我不起作用。我把代码放在这里，也许有人可以检查一下，看看能做些什么。我已经删除了样式表和其他不相关的数据

    ["client_name": "Client Name", "balance:" 40599.00", "contract_expiring": "4,
{"id":"94","area":"Central","building":"Building 108","unit":"104B", "rent_amount": "40000", 
{"id":"22","area":"North East","building":"Building 555","unit":"1304", "rent_amount": "15000"}]

export default class ClientDetails extends Component {


        constructor() {
            super()
            this.state = {
               isLoading: true
            }
        }
        renderItem = ({ item }) => {
            return (
         <View>
         <Text>
    {item.building}
    </Text>
        <Text style={{ fontSize: 16, color: '#2a5566', marginBottom: 10 }}>
           {item.unit}
           </Text>

           <Text style={{ fontSize: 18, color: 'green' }}>
            Rent Amount:  {item.rent_amount}
            </Text>
        </View>

            )
          }



        componentDidMount = () => {
        return fetch("http://192.168.0.106/db_1/list.php?itemId=194")
                    .then((response) => response.json())
                    .then((responseJson) => {
                    this.setState({
                        isLoading: false,
                        dataSource: responseJson,

                    })
                })

        }






        render() {
    return (
           <View style={styles.MainContainer}>
      <FlatList
                data={ this.state.dataSource }
                   ItemSeparatorComponent = {this.renderSeparator}
         renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString()}
    />
     </View>

            );
        }
    }

[“客户名称”：“客户名称”，“余额：”40599.00”，“合同到期”：“4，
{“id”：“94”，“面积”：“中央”，“大楼”：“108楼”，“单位”：“104B”，“租金金额”：“40000”，
{“id”：“22”，“面积”：“东北”，“建筑”：“555建筑”，“单位”：“1304”，“租金金额”：“15000”}]
导出默认类ClientDetails扩展组件{
构造函数（）{
超级（）
此.state={
孤岛加载：正确
}
}
renderItem=（{item}）=>{
返回(
{item.building}
{item.unit}
租金金额：{item.Rent\u Amount}
)
}
componentDidMount=（）=>{
返回取回（“http://192.168.0.106/db_1/list.php?itemId=194")
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据来源：responseJson，
})
})
}
render（）{
返回(
index.toString（）}
/>
);
}
}

数组的这部分（[“客户名称”：“客户名称”，“余额：”40599.00”，“合同到期”：“4，）我不想成为平面列表的一部分，但单独显示在平面列表上方

谢谢。

常量数据=[
const data = [
  {'id': "90", 'clientname': "Client Name", 'balance': "10000"},
  {'propid': "80", propname: 'Property Name', 'rented': "Rented", 'rent': '10000'}
]
class App extends Component {
  render() {
    return (
     <View> 
      <Text style={{fontSize:20}}>Client Name - {data[0].clientname}</Text> 
      <FlatList
        data={data}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.clientname}</Text>
              <Text>{item.propname}</Text>
            </View>
          );
        }}
      />
      </View>
    );
  }
}

{'id'：“90”，'clientname'：“Client Name”，'balance'：“10000”}，
{'propid'：“80”，propname:'物业名称'，'出租'：'出租'，'租金'：'10000'}
]
类应用程序扩展组件{
render（）{
返回(
客户端名称-{data[0]。客户端名称}
{
返回(
{item.clientname}
{item.propname}
);
}}
/>
);
}
}

react native Flatlist

提供了一个可用于此操作的

ListHeaderComponent

道具。作为文档：

在所有项的顶部呈现。可以是React组件类、呈现函数或呈现元素

因此，在您的

Flatlist

列表中，您可以将其用作：

<Flatlist
   ...
   ListHeaderComponent={<Text>Hello</Text>}
/>

来源：

检查这是你想要的吗？