时间戳

首页 > 解决方案 > 如何添加在通过数据库获取数据的 FlatList 之前

react-native - 如何添加在通过数据库获取数据的 FlatList 之前

问题描述

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

例如数组是这样的

[{'id': "90", 'clientname': "客户名称", 'balance': "10000",{'propid': "80", propname: '物业名称', 'rented': "租用" , 'rent': '10000'},{'propid': "70", propname: '物业名称 2', 'rented': "未出租", 'rent': '4000'}}]

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

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

正如我所提到的，我可以正确显示 Property FlatList。我无法得到的是显示客户特定的详细信息。

更新：

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

    ["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>

            );
        }
    }

这部分（["client_name": "Client Name", "balance:" 40599.00", "contract_expiring": "4, ) 数组我不想成为 FlatList 的一部分，但单独显示在 FlatList 上方。

谢谢。

标签： react-native

解决方案

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>
    );
  }
}

推荐阅读