Question

我有一个React Native应用，我想在地图视图中将自定义图像显示为标记，并且我正在动态地从api获取图像的路径。我不知道require方法是否可以动态拍摄图像。但是，每当我尝试执行此操作时，都会引发以下错误：

Warning: Failed prop type: Invalid prop `source` supplied to `ForwardRef(Image)`

这是我试图将图像显示为标记的方式：

 async componentDidMount() {
    await fetch('https://api', {
      method: 'GET',
      headers: {
        'X-API-KEY': '123456',
        'Authorization': userToken
      }
    })
      .then((response) => {
        return response.json()
      })
      .then((response) => {
        let coordinates = response.data.coordinates
        let geoCoordinates = []
        coordinates.map((coord) => {
          const coordsNumber = {
            'latitude': Number(coord.latitude),
            'longitude': Number(coord.longitude),
            'title': String(coord.title),
            'description': String(coord.description),
            'image': String(coord.image)
          }
          geoCoordinates.push(coordsNumber)

        })
        this.setState({
          coordinates: geoCoordinates,
          packeging: response.data.packeging,
        })
      })
      .catch((error) => {
        console.log('cutch block ', error)
      })
  }
  
  render() {
  return (
    <ScrollView style={[{ flex: 1 }]}>
      <View style={styles.container}>
        <MapView
          initialRegion={{
            latitude: 3.101033,
            longitude: 101.683881,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          style={styles.mapcontainer}
          ref={c => this.mapView = c}
        >
          {this.state.coordinates.map((coordinate, index) =>
            <MapView.Marker key={`coordinate_${index}`} 
                            coordinate={coordinate}
                            title={coordinate.title} 
                            description={coordinate.description} >
                   <Image source={coordinate.image} />
           </MapView.Marker>
          )}
          {(this.state.coordinates.length >= 2) && (
            <MapViewDirections
              origin={this.state.coordinates[0]}
              waypoints={(this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1) : null}
              destination={this.state.coordinates[this.state.coordinates.length - 1]}
              apikey={'api key'}
              strokeWidth={5}
              strokeColor="blue"
              optimizeWaypoints={true}
              onStart={(params) => {
                console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
              }}
              onReady={result => {
                console.log('Distance: ${result.distance} km')
                console.log('Duration: ${result.duration} min.')

                this.mapView.fitToCoordinates(result.coordinates, {
                  edgePadding: {
                    right: (width / 20),
                    bottom: (height / 20),
                    left: (width / 20),
                    top: (height / 20),
                  }
                });
              }}
              onError={(errorMessage) => {
              }}
            />
          )}
        </MapView>
      </View>
    </ScrollView>
  );
}
}

在这里可以做什么？ <Image source={coordinate.image} />这部分显示的错误。

Answer 1

如果这些是远程图像，则需要以不同的方式传递源代码。

<Image
  style={{width: 50, height: 50}}
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

查看documentation以获得更多示例。

道具类型失败：提供给`ForwardRef（Image）`的道具`source'无效

1 个答案: