Добавить несколько данных в один контейнер в плоский список

Question

Здравствуйте, я новичок в реакции на родную.Я работаю над плоским списком. Я хочу, чтобы несколько элементов отображались в списке в одном контейнере.Пример Я хочу добавить несколько данных в одном контейнере.Мой код приведен ниже, любая помощь будет оценена по достоинству.

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>

Я хочу такой макет, у меня есть плоский список, который я хочу показатьЭти данные приведены на рисунке.

Answer 1

просто добавьте их как ключи в массиве образцов.и получить к ним доступ в item в вашем FlatList компоненте.

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}

Answer 2

Измените состояние, как показано ниже, добавьте больше элементов, похожих на данные и ключ

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>