Как использовать выборки данных в реагировать нативно с методом рендеринга flatlist

Question

 constructor(props) {
    super(props);
    this.state = {};
  }
  _goToProductDetails=()=>{
    //   alert("hii")
   this.props.navigation.navigate("productDetails")
  }
  _renderScrollViewContent() {
    const data = Array.from({length: 2});
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#DEE8F9',
        }}>
        {/* <MyDrawerNavigator/> */}

        {data.map((_, i) => (
          <View style={{flex: 1, marginTop: 5}}>
            <View style={{flex: 1, flexDirection: 'row'}}>
              <View style={{height: height / 2.7, width: width / 2.09}}>
                <View
                  style={{
                    height: height / 2.7 / 1.3,
                    width: width / 2.09,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#FFFFFF',
                    alignSelf: 'center',
                  }}>
                  <TouchableOpacity onPress={this._goToProductDetails} style={{flexDirection: 'row'}}>
                    <View
                      style={{
                        height: 30,
                        width: 30,
                        backgroundColor: 'red',
                        borderRadius: 15,
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                      <Text style={{fontSize: 12, color: '#FFFFFF'}}>20%</Text>
                      <Text style={{fontSize: 10, color: '#FFFFFF'}}>OFF</Text>
                    </View>
                    <Image
                      style={{height: 150, width: 130, resizeMode: 'center'}}
                      source={require('../Homecontent/HomeImages/swiper2.jpeg')}
                    />

                    <View>
                    <Icon name="favorite" />
                    </View>
                  </TouchableOpacity>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      height: 40,
                      width: width / 2.09,
                    }}>
                    <View>
                      <View>
                        <Text>powerBank</Text>
                      </View>
                      <View>
                        <Text style={{fontSize: 10}}>powerBank</Text>
                      </View>
                    </View>
                    <View
                      style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        height: 40,
                        width: 100,
                        alignItems: 'center',
                      }}>
                      <TouchableOpacity
                        style={{
                          height: 25,
                          width: 48,
                          backgroundColor: 'blue',
                          borderRadius: 5,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text style={{color: '#FFFFFF', fontSize: 10}}>
                          Share
                        </Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={{
                          height: 25,
                          width: 48,
                          backgroundColor: 'blue',
                          borderRadius: 5,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text style={{color: '#FFFFFF', fontSize: 10}}>
                          Share
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
                <View style={{height: height / 13}}>
                  <Text>Rs 5999</Text>
                  <Text style={{fontSize: 10}}>Rs 5999</Text>
                  <Text>*****</Text>
                </View>
              </View>
              <View style={{width: 5}} />
              <View style={{height: height / 2.7, width: width / 2.09}}>
                <View
                  style={{
                    height: height / 2.7 / 1.3,
                    width: width / 2.09,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#FFFFFF',
                    alignSelf: 'center',
                  }}>
                  {/*<View style={{flexDirection: 'row'}}>
                    <View
                      style={{
                        height: 30,
                        width: 30,
                        backgroundColor: 'red',
                        borderRadius: 15,
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                      <Text style={{fontSize: 12, color: '#FFFFFF'}}>20%</Text>
                      <Text style={{fontSize: 10, color: '#FFFFFF'}}>OFF</Text>
                    </View>
                    <Image
                      style={{height: 150, width: 130, resizeMode: 'center'}}
                      source={require('../Homecontent/HomeImages/powerBank.jpg')}
                    />

                    <View>
                    <Icon name="favorite" />
                    </View>
                  </View> */}
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      height: 40,
                      width: width / 2.09,
                    }}>
                   {/* <View>
                      <View>
                        <Text>powerBank</Text>
                      </View>
                      <View>
                        <Text style={{fontSize: 10}}>powerBank</Text>
                      </View>
                    </View>*/}
                    {/*<View
                      style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        height: 40,
                        width: 100,
                        alignItems: 'center',
                      }}>
                      <TouchableOpacity
                        style={{
                          height: 25,
                          width: 48,
                          backgroundColor: 'blue',
                          borderRadius: 5,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text style={{color: '#FFFFFF', fontSize: 10}}>
                          Share
                        </Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={{
                          height: 25,
                          width: 48,
                          backgroundColor: 'blue',
                          borderRadius: 5,
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}>
                        <Text style={{color: '#FFFFFF', fontSize: 10}}>
                          Share
                        </Text>
                      </TouchableOpacity>
                    </View>*/}
                  </View>
                </View>
              {/*  <View style={{height: height / 13}}>
                  <Text>Rs 5999</Text>
                  <Text style={{fontSize: 10}}>Rs 5999</Text>
                  <Text>*****</Text>
                </View>*/}
              </View>
              {/* <View style={{height:height/13}}>
                        <Text>hiii</Text>
                    </View> */}
            </View>
            {/*#D3D3D3 <View style={{height:height/3,width:width/2.06,justifyContent:"center",alignItems:"center",borderLeftWidth:2,borderColor:"#D3D3D3"}}>
                    <Image style={{resizeMode:"center"}} source={require("../../../../assests/AirPurifier.jpg")}/>
                    </View> */}
          </View>
        ))}
      </View>
    );
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <ProductRenderScreen
          renderHeader={
            <View
              style={{
                flex: 1,
                backgroundColor: '#232F3E',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <View style={{justifyContent: 'center'}}>
                <OpenDrawerButton navigation={this.props.navigation}/>
              </View>
              <View style={{justifyContent: 'center'}}>
                <SearchBar />
              </View>
              <View style={{justifyContent: 'center', marginTop: 14}}>
                <Cart navigation={this.props.navigation} />
              </View>
            </View>
          }
          renderSortFilter={
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                backgroundColor: 'white',
                justifyContent: 'center',
                alignItems: 'center',

              }}>
            { /* <Sort navigation={this.props.navigation} />

              <Filter /> */}
            </View>
          }
          _renderScrollViewContent={this._renderScrollViewContent()}
        />
      </View>

вот код, в котором я пытаюсь получить его с помощью метода flatlist, делая данные, чтобы извлечь их, показывает ошибку или ошибку опечатки или синтаксическая ошибка не найдена, как это исправить?

делает Фрагмент для тестирования с локальным изображением, поэтому я протестировал функцию массива данных, которую я затем вызвал со значением карты, как связать его с URL-адресом и получить реальные данные?