如何在使用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连接并获取真实数据？