React Native Maps - takeSnapshot 不捕获标记
React Native Maps - takeSnapshot not capturing markers
本机反应: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></Text>
<View>
<Text style={{ fontSize: 12 }}>Custom Text!</Text>
</View>
</Callout>
</MapView.Marker>
</MapView>;
请告诉我这种可能性。
你可以尝试使用宽度和高度吗?
const snapshot = this.viewRefTest.takeSnapshot({
width: 500,
height: 500,
format: 'png',
quality: 0.5,
result: 'file',
});
snapshot.then((uri) => {
console.log(uri);
});
您可以通过使用 "react-native-view-shot"
创建快照来解决这个问题
我认为这个错误取决于你什么时候调用 this.viewRefTest.takeSnapshot()
你可以查看我的https://expo.dev/@duongtungls/expo-map-view-example
我认为在安装地图后立即调用 takeSnapshot
不会获得标记或地图。
如果在回调后调用 onMapReady
仍然需要等待数百毫秒才能为地图和标记拍摄完整快照。
希望此示例代码可以帮助您解决问题。
import { StatusBar } from 'expo-status-bar';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { Ionicons } from '@expo/vector-icons';
export default function App() {
const mapRef = useRef(null);
const [uri, setUri] = useState(null);
const takeSnapshot = useCallback(() => {
if (!mapRef || !mapRef.current) {
return;
}
setTimeout(() => {
const snapshot = mapRef.current.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')
});
snapshot.then((uri) => {
setUri(uri);
});
}, 800); // I add some timeout delay because without delay snapnot won't have map or marker.
}, [mapRef]);
return (
<View style={styles.container}>
{!uri && (
<MapView
ref={mapRef}
style={{
width: '100%',
height: '100%',
}}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onMapReady={takeSnapshot} // I think need wait for map ready to take snapshot but seem still need wait by setTimeout to get fully snapshot
>
<Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
title={'Test'}
>
<Ionicons name="trophy" size={32} color="red" />
<Text>This is a marker</Text>
</Marker>
</MapView>
)}
{uri && (
<Image
style={{
width: '100%',
height: '100%',
resizeMode: 'contain',
borderColor: 'red',
borderWidth: 10,
}}
source={{
uri,
}}
/>
)}
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
安装地图后拍摄快照
onMapReady 和 800 毫秒延迟后拍摄的快照
此致,
经过多次尝试和添加延迟的组合后,height/width,我无法使用 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></Text>
<View>
<Text style={{ fontSize: 12 }}>Custom Text!</Text>
</View>
</Callout>
</MapView.Marker>
</MapView>
CaptureRef
Returns 图片URI的一个Promise。它有助于将 React Native 视图捕获到图像中。我们可以提及捕获图像的高度、宽度、质量和格式。
本机反应: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></Text>
<View>
<Text style={{ fontSize: 12 }}>Custom Text!</Text>
</View>
</Callout>
</MapView.Marker>
</MapView>;
请告诉我这种可能性。
你可以尝试使用宽度和高度吗?
const snapshot = this.viewRefTest.takeSnapshot({
width: 500,
height: 500,
format: 'png',
quality: 0.5,
result: 'file',
});
snapshot.then((uri) => {
console.log(uri);
});
您可以通过使用 "react-native-view-shot"
创建快照来解决这个问题我认为这个错误取决于你什么时候调用 this.viewRefTest.takeSnapshot()
你可以查看我的https://expo.dev/@duongtungls/expo-map-view-example
我认为在安装地图后立即调用 takeSnapshot
不会获得标记或地图。
如果在回调后调用 onMapReady
仍然需要等待数百毫秒才能为地图和标记拍摄完整快照。
希望此示例代码可以帮助您解决问题。
import { StatusBar } from 'expo-status-bar';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import { Ionicons } from '@expo/vector-icons';
export default function App() {
const mapRef = useRef(null);
const [uri, setUri] = useState(null);
const takeSnapshot = useCallback(() => {
if (!mapRef || !mapRef.current) {
return;
}
setTimeout(() => {
const snapshot = mapRef.current.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')
});
snapshot.then((uri) => {
setUri(uri);
});
}, 800); // I add some timeout delay because without delay snapnot won't have map or marker.
}, [mapRef]);
return (
<View style={styles.container}>
{!uri && (
<MapView
ref={mapRef}
style={{
width: '100%',
height: '100%',
}}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onMapReady={takeSnapshot} // I think need wait for map ready to take snapshot but seem still need wait by setTimeout to get fully snapshot
>
<Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
title={'Test'}
>
<Ionicons name="trophy" size={32} color="red" />
<Text>This is a marker</Text>
</Marker>
</MapView>
)}
{uri && (
<Image
style={{
width: '100%',
height: '100%',
resizeMode: 'contain',
borderColor: 'red',
borderWidth: 10,
}}
source={{
uri,
}}
/>
)}
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
安装地图后拍摄快照
onMapReady 和 800 毫秒延迟后拍摄的快照
此致,
经过多次尝试和添加延迟的组合后,height/width,我无法使用 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></Text>
<View>
<Text style={{ fontSize: 12 }}>Custom Text!</Text>
</View>
</Callout>
</MapView.Marker>
</MapView>
CaptureRef
Returns 图片URI的一个Promise。它有助于将 React Native 视图捕获到图像中。我们可以提及捕获图像的高度、宽度、质量和格式。