Arrays 如何划分平面列表中的数组和react native中的文本

如何放置数组的第一行

id:1，name:Some name，bal:1000

在{name}{balance}中 然后是a中的其他两行。通过获取数组，我可以显示平面列表或文本，但不能同时显示两者。如果我在另一个屏幕上放入第一行，然后在第二个屏幕上导入它，我就能够显示所需的结果。但我认为有一种更好的方法可以在单屏幕上划分这个数组，并显示文本和平面列表。谢谢

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

        );
    }
}

---

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

您可以将数据保存在不同的状态道具中，而不是在道具中。我希望下面的代码可以匹配您的问题

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

---

您可以在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>
  );
}

---

---

我不能理解你的意图，你能描述清楚并给出一个例子吗？你在问题中写的数组是无效的？正如@VigneshVPai所说，你的数组没有合适的形状。@in.k，但我可以显示，或者，这是什么意思？谢谢你的代码。查看代码只考虑没有IF语句。我想把它们都还回去。首先我想返回having id、name、balance，然后我想返回having客户机属性列表。请检查下面的更多注释项目是按索引呈现的，如果你想数组中的第一个元素显示其余的元素，但是第一个元素视图与其他元素不同，它可以满足你的要求@in.k，我知道你想要每一个当项目是{name，…}时，然后呈现文本。我认为你首先必须拆分与secionlist数据匹配的数组，然后使用SectionList。我试图调整代码并删除if-else，但问题仍然没有解决。我想现在的设置对我来说是怎样的，我将保留它，从另一个屏幕导入第一部分。唯一的问题是，如果有不同的数据为同一个客户端获取不同的信息，那么它将继续为每个数据添加新的屏幕。无论如何，非常感谢你的帮助谢谢你的评论。我不想要别的什么。。我想要和两个项目。FlatList显示属性和文本显示客户端详细信息使用SectionList和header项我想你会得到你的东西，正如我在帖子中提到的，如果我使用dataSource:responseJson，或者如果我将其更改为例如cn:responseJson.name，我可以得到FlatList，balance:responseJson.bal然后我得到文本。我不想要标题，我需要在屏幕上显示包装在视图和文本中的客户端详细信息，因为客户端可以有更多的详细信息，不仅仅是balance和name，而且数据是通过url动态获取的。如何定义使用建议的常量数据动态获取数据？动态地感谢，好像数组可能是空的？如果可能，请列出可能的数据源，例如最佳/最坏情况，哪些数据是固定的，以便我可以尝试给出更好的解决方案。不，数据不能为空。我的意思是在代码中提到const data=[]。这是您手动输入的数据。我的意思是，一旦数据被获取，正如您在原始帖子fromURL中看到的，并且有响应，我如何将该数据放入您的constdatai see中。根据您最初的帖子，您可以在ComponentDidMount中使用responseJson中的this.state.dataSource替换数据。让我更新我的答案。未定义获取错误不是数据[0]的对象。如果我删除这一行，则平面列表输出良好。