Как мне сопоставить более двух массивов одновременно в реагировать родной?

Question

Как мне сопоставить два разных массива в реагировать нативно?В моем случае я получаю ответ от сервера и сопоставляю его.Также есть еще один массив с именем images, который я хочу перечислить вместе с полученным ответом от сервера. Но второе отображение зацикливается на первом.Как мне отделить его от первого? Ниже приведен мой код.

пример кода

<ScrollView>
  {this.state.workers.map(a =>
    <CardSection>
      <TouchableOpacity onPress={() => this.popupDialog.show()}>
        <View style={{ marginTop: 10, marginLeft:120}}>
          {images.map(b =>
            <Image
              style={{ height: 100, width: 100 }}
              source={{ uri: b.image }}
             />
           )}
           <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
         </View>
       </TouchableOpacity>
     </CardSection>
   )}

workers массив - это ответ json, из которого я получаюсервер. images массив выглядит следующим образом

export const images = [
  {
    image:'http://localhost:3000/Images/carpenter.png',
    text:'hello'
  },
  {
    image:'http://localhost:3000/Images/electrician.png',
    text:'hii'
  },
]

Также этот массив workers выглядит как

updated

 [
        {
            "sl.no": 1,
            "worker_id": "wr_1",
            "work_type": "carpenter",
            "phone_num": "3456789243"
        },
        {
            "sl.no": 2,
            "worker_id": "wr_2",
            "work_type": "electrician",
            "phone_num": "345221344"
        },
        {
            "sl.no": 3,
            "worker_id": "wr_3",
            "work_type": "plumber",
            "phone_num": "8976545677"
        }
    ]

Answer 1

вы можете легко использовать плоский список с лучшей производительностью

import React, { Component } from "react";
import { View, FlatList, TouchableOpacity, Image, Text } from "react-native";

const workers = [
    { id: 1, name: 'Nima', images: [{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },{ image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' }] },
    { id: 2, name: 'Mike', images: [{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },{ image: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image', text: 'goodby' },] },
]

class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            workers: workers
        };
    }

    _renderItem = ({ item }) => {
        console.log(item);
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity>
                    <View style={{ marginTop: 10, marginLeft: 120 }}>
                        {item.images.map((b, index) => {
                            console.log(b.image);
                            return (
                                <View key={index}>
                                    <Image
                                        style={{ height: 100, width: 100 }}
                                        source={{ uri: b.image }}
                                    />
                                    <Text
                                        style={{ marginLeft: 20, fontSize: 20, color: "black" }}
                                    >
                                        {b.text}
                                    </Text>
                                </View>
                            );
                        })}
                        <Text style={{ marginLeft: 20, fontSize: 20, color: "black" }}>
                            {item.name}
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    };

    _keyExtractor = (item, index) => item.id.toString();

    render() {
        return (
            <FlatList
                data={this.state.workers}
                extraData={this.state}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
            />
        );
    }
}

export default Test;

Answer 2

Если изображения не загружаются, возможно, это связано с тем, что вы передаете неправильные свойства компоненту <Image />.Найдите документы для компонента <Image /> или замените его на <img /> и передайте строку URL-адреса изображения в атрибут src.

getImageUri(worker) {
  // Decide which image to return for a certain type of worker
  // For more workers and images, change the following logic
  if(worker.work_type == 'carpenter') {
    return images[0].image;
  } else if(worker.work_type == 'electrician') {
    return images[1].image;
  } else {
    return '';
  }
}

render() {
...
<ScrollView>
  {this.state.workers.map((a, index) =>
    <CardSection>
      <TouchableOpacity onPress={() => this.popupDialog.show()}>
        <View style={{ marginTop: 10, marginLeft:120}}>
            <Image
              style={{ height: 100, width: 100 }}
              source={{ uri: this.getImageUri(a)}}
             />
           <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
         </View>
       </TouchableOpacity>
     </CardSection>
   )}
</ScrollView>
...
}

Answer 3

Вы можете просто переместить ее над первой картой и сохранить результат:

render() {
  const imagesToRender = images.map(b => {
    return (
      <Image
        style={{ height: 100, width: 100 }}
        source={{ uri: b.image }}
      />
    );
  });

  return (
    <ScrollView>
      {this.state.workers.map(a =>
        <CardSection>
          <TouchableOpacity onPress={() => this.popupDialog.show()}>
            <View style={{ marginTop: 10, marginLeft:120}}>
              {imagesToRender}
              <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
            </View>
          </TouchableOpacity>
        </CardSection>
      )}
    </ScrollView>
  );
}

Кроме того, не забудьте добавить key реквизитов к каждому Image икаждый CardSection.