React Native Maps - takeSnapshot 不捕获标记

Question

反应本机：https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz 反应：16.13.1 反应本机地图：0.28.0

我想将标记作为快照的一部分。当我们使用takeSnapshot方法时，所有标记都将被忽略。

const snapshot = this.viewRefTest.takeSnapshot({
  format: 'png', // image formats: 'png', 'jpg' (default: 'png')
  quality: 0.5, // image quality: 0..1 (only relevant for jpg, default: 1)
  result: 'file', // result types: 'file', 'base64' (default: 'file')
});

<MapView
  ref={(viewRefTest) => {
    this.viewRefTest = viewRefTest;
  }}
  showsUserLocation={true}
  followUserLocation={true}>
  <MapView.Marker coordinate={item.location}>
    <Image
      style={{ width: 30, height: 30 }}
      source={require('../../assets/images/trophy.png')}
    />
    <Callout style={{ width: 250, flexDirection: 'row', alignItems: 'center' }}>
      <Text>$23</Text>
      <View>
        <Text style={{ fontSize: 12 }}>Custom Text!</Text>
      </View>
    </Callout>
  </MapView.Marker>
</MapView>;

请让我知道这种情况的可能性。

Answer 1

经过太多尝试和添加延迟、高度/宽度的组合后，我无法使用takeSnapshot方法捕获自定义标记。

作为解决方法，我使用了captureRef方法react-native-view-shot

https://github.com/gre/react-native-view-shot

const uri = await captureRef(this.viewRefTest, {
            format: "png",
            quality: 1
        })

<MapView
  ref={(viewRefTest) => {
    this.viewRefTest = viewRefTest;
  }}
  showsUserLocation={true}
  followUserLocation={true}>
  <MapView.Marker coordinate={item.location}>
    <Image
      style={{ width: 30, height: 30 }}
      source={require('../../assets/images/trophy.png')}
    />
    <Callout style={{ width: 250, flexDirection: 'row', alignItems: 'center' }}>
      <Text>$23</Text>
      <View>
        <Text style={{ fontSize: 12 }}>Custom Text!</Text>
      </View>
    </Callout>
  </MapView.Marker>
</MapView>

CaptureRef返回图像 URI 的 Promise。它有助于捕获图像的 React Native 视图。我们可以提及捕获图像的高度、宽度、质量和格式。