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

Question

您好，我是 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>

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

标签： react-nativerenderreact-native-flatlist

Answer 1

修改 state 如下，添加更多类似于 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>