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

【问题标题】：To add multiple data in one container in flatlist在 flatlist 的一个容器中添加多个数据
【发布时间】：2019-07-25 10:02:03
【问题描述】：

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

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>

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

【问题讨论】：

嗨，Shabnam，您的代码似乎正确，您能说出您面临什么问题吗？
当我跑步时，我只得到一个项目，我想要一个平面列表容器中的多个项目。
就像除了钥匙我想要更多的项目我该如何添加它们。
我不确定，但如果这是您的要求，请查看facebook.github.io/react-native/docs/sectionlist。谢谢
这是一个网格视图

标签： react-native render react-native-flatlist

【解决方案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>

【讨论】：

【解决方案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}

【讨论】：

使用 numColumns={2} 制作两个不同的 FlatList 并更改左侧图像示例的设计。第二个不给 numColumns 道具。并据此设计。 View 的 flexDirection 设置为 row
我只想实现右一个左一个是网格视图我已经做到了。
第二个不要给 numColumns 道具。并据此设计。 View 的样式，flexDirection 设置为 row。