在 flatlist 的一个容器中添加多个数据

Question

您好，我是 React Native 的新手。 我正在处理 flatlist 我希望在一个容器中的列表中显示多个项目。 示例我想在一个容器中添加多个数据。 我的代码在下面给出，任何帮助将不胜感激。

this.state = {
  FlatListItems: [
    { key: "Skptricks" },
    { key: "Sumit" },
    { key: "Amit" },
    { key: "React" },
    { key: "React Native" },
    { key: "Java" },

  ]
};

我已经打印了密钥。

     <View style={styles.container}>
         <FlatList
            data={ this.state.FlatListItems }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) =>

            <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > 
             {item.key} </Text>        
          }
         />
       </View>

我想要这种布局我有 flatlist 我想显示像这样在图像中给出的数据。

Answer 1

修改状态如下，添加更多类似于 data & key 的项目

this.state = {
  FlatListItems: [
    { key: "Skptricks", data: "one" },
    { key: "Sumit" , data: "two"},
    { key: "Amit" , data: "three"},
    { key: "React", data: "four" },
    { key: "React Native" , data: "five"},
    { key: "Java", data: "six" },

  ]
};

并将其在 FLatlist 中呈现为：

<View style={styles.container}>
         <FlatList
            data={ this.state.FlatListItems }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) =>(
            <View>
              <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > 
               {item.key} </Text>  
               <Text {item.data} </Text>                   
            </View>    
          )}
          numColumns={2}
          keyExtractor={(item, index) => index}
         />
       </View>

Answer 2

只需将它们添加为对象示例数组中的键即可。 并在您的FlatList组件中的item中访问它们。

FlatListItems: [
  { title: "Skptricks",subTitle:"Asdasd" },
  { title: "melons",subTitle:"melons are great" }
]

并在您的 FlatList 组件中

<FlatList
  data={ this.state.FlatListItems }
  ItemSeparatorComponent = {this.FlatListItemSeparator}
  renderItem={({item}) =>
    (<View>
      <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > 
       {item.title} </Text>   
      <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > 
       {item.subTitle} </Text>     
    </View> )
  }
  keyExtractor={(item,index)=>index}
/>

编辑：将numColumns道具赋予FlatList组件作为

numColumns={2}