如何在反应原生中划分FlatList和Text中的数组

Question

如何放置数组的第一行

"id":"1","name":"Some Name","bal":"1000"

在<Text>{name} {balance}</Text> 然后是<FlatList /> 中的其他 2 行。我可以通过获取数组来显示 FlatList 或 Text，但不能同时显示两者。如果我让另一个屏幕放入第一行然后将其导入第二个屏幕，我就能够显示所需的结果。但是我认为有更好的方法可以将这个数组划分为单个屏幕并显示Text和FlatList。谢谢。

[
  [
    {
      "id": "1",
      "name": "Some Name",
      "bal": "1000",
      "ab": "1000"
    }
  ],
  {
    "area": "North",
    "building": "Some Building",
    "unit_number": "123"
  },
  {
    "area": "North",
    "building": "Some Building",
    "unit_number": "123"
  }
]

更新：请查看代码。我已经注释掉了我需要在

中提取和显示数组的第一行的行

export default class ClientDetails extends Component {


    constructor() {
        super()
        this.state = {
           isLoading: true
        }
    }
    renderItem = ({ item }) => {
        return (
     <View>
    <Text>
       {item.area}
       </Text>
       <Text>
        Rent Amount:  {item.building}
        </Text>
       <Text>
        Rent Amount:  {item.unit_number}
        </Text>
    </View>
        )
      }
    componentDidMount = () => {
    return fetch("http://192.168.0.106/db_1/list.php?id=1")
                .then((response) => response.json())
                .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson,
                })
            })
    }
    render() {
return (
       <View style={styles.MainContainer}>

//Here I was to put <Text> {id}{name}{bal}</Text> but I can either get <Text> to display or <FlatList>
  <FlatList
            data={ this.state.dataSource }
               ItemSeparatorComponent = {this.renderSeparator}
     renderItem={this.renderItem}
    keyExtractor={(item, index) => index.toString()}
/>
 </View>

        );
    }
}

Answer 1

您可以在 renderItem 中过滤掉 FlatList 的客户信息。在您的情况下，这可能有效：

renderItem = ({ item }) => {
  if (item.area != null){
    return (
      <View>
        <Text>
        {item.area}
        </Text>
        <Text>
         Rent Amount:  {item.building}
         </Text>
        <Text>
         Rent Amount:  {item.unit_number}
         </Text>
     </View>
    )
  } 
}

render() {
  const data = this.state.dataSource

  return (
    <View style={styles.container}>
      { data && data[0] && data[0][0] ?
      <Text>{data[0][0].id} {data[0][0].name} {data[0][0].bal}</Text> : null }
      <FlatList
        data={ data }
        ItemSeparatorComponent = {this.renderSeparator}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString()}/>
    </View>
  );
}

Answer 2

您可以将静态数据放在该特定数组的第一项中。否则，如果您想要相同的静态数据，请使用 SectionList 并使用 renderSectionHeader 道具来使用静态元素。

Answer 3

你可以将数据保存在不同的 state props 中，而不是放在 props 中。我希望下面的代码可以匹配你的问题

constructor(props){
  this.state = {
     isLoad:false,
     listData:[],
     idInfo:{}
  }
}

render(){
<View>
<this.state.idInfo && this.state.dataList.length == 0 && <Text>{this.state.idInfo.name}</Text>
<this.state.dataList.lenght>0 && <FlatList/>
<View>
}

componentDidMount = () => {
    // I suggest you request in different methods, the according to the 
   //return data, update the state 
    return fetch("http://192.168.0.106/db_1/list.php?id=1")
                .then((response) => response.json())
                .then((responseJson) => {
                if("responseJson is list"){
                this.setState({
                    isLoading: false,
                    listData: responseJson,
                })}
               if("respnseJson is the id you say"){
                  this.setState({
                    isLoading: false,
                    idInfo: responseJson,
                })}
               }
            })
    }