Реагировать на собственное представление

Question

Я разрабатываю приложение, в котором пользователь добавляет имя элемента, описание, количество и URL-адрес изображения, и оно сохраняется в AsyncStorage.Я сделал это готово, и это выглядит так:

Теперь я пытаюсь получить его из Asyncstorage, и я получаю 2D-массив.Вот код:

myA1 = await AsyncStorage.getItem('key1');
   var ee=JSON.parse(myA1); //ee is 2D array

Это выглядит так

[[imgurl1 itemname1, desc1, quantity1],
 [imgurl2 itemname2, desc2, quantity3],
 [imgurl3 itemname3, desc2, quantity3],
 [imgurl4 itemname4, desc2, quantity3]]

Как я могу добиться этого ??Я новичок в реагировании на родной

Я хочу отобразить его следующим образом:

:

Answer 1

renderEditAndClose() {
    return(
      <View style={{flex:1, flexDirection: "row", justifyContent: "flex-end"}}>
        {this.renderEditImage()}
        {this.renderCloseImage()}
      </View>
    );
  }

  renderImageAndItemData(item: Object) {
    return(
      <View style={{flex:1, flexDirection:"row"}}>
        {this.renderItemImage()}
        {this.renderItemData(item)}
      </View>
    );
  }

  renderItemImage(width: number, height: number, url: string) {
    return (
      <Image style={{ width: width, height: height }} source={{uri: url}} />
    );
  }
  renderItemData(item: Object) {
    return(
      <View>
        <View style={{flex: 1, flexDirection: "row", justifyContent: "space-around"}}>
          <Text>{item.name}</Text>
          <Text>{item.quantity}</Text>
        </View>
        <Text>{item.description}</Text>
      </View>
    );
  }

  renderRow(item: Object) {
    return() {
        <View>
          {this.renderEditAndClose()}
          {this.renderImageAndItemData(item)}
        </View>
    }
  }
  render() {
      return (
        <FlatList data={ee}
                  renderItem={(item) => this.renderRow(item)} />
      );
  }

Answer 2

Вы можете использовать FlatList для рендеринга списка данных.У него есть renderItem реквизит, позволяющий передавать представление для рендеринга каждой строки данных подобным образом.Поместите ваши данные в состояние (data в этом коде).Вот пример:

makeContentItem(item) {
        return (
            <TouchableOpacity
                onPress={() => {
                    //Do sth when clicking on a row
            }}>
                <View style={{ width: '90%', height: 140, marginBottom: 5, borderRadius: 2, backgroundColor: 'white' }}>
                    <View style={{ flex: 1, flexDirection: 'row' }}>
                        <Image style={{ width: 40, height: 40 }} source={require(item.imgurl)} />
                        <View>
                            <Text>{item.itemname}</Text>
                            <Text>{item.desc}</Text>
                            <Text>{item.quantity}</Text>
                        </View>
                    </View>
                </View>
          </TouchableOpacity>
     );
}


render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={({ item, index }) => {
                return this.makeContentItem(item) 
            }
        />
    )
}   

Вы можете изменить стиль, чтобы добиться того, что вы хотите.также вы можете взглянуть на FlatList

Я надеюсь, что это поможет