任何人都可以协助将此类组件代码转换为功能组件/挂钩
class MarkerTypes extends React.Component {
constructor(props) {
super(props);
this.state = {
mapSnapshot: null,
};
}
takeSnapshot() {
this.map.takeSnapshot(
300,
300,
{
latitude: LATITUDE - SPACE,
longitude: LONGITUDE - SPACE,
latitudeDelta: 0.01,
longitudeDelta: 0.01 * ASPECT_RATIO,
},
(err, data) => {
if (err) {
console.log(err);
}
this.setState({ mapSnapshot: data });
}
);
}
render() {
return (
<View>
<MapView initialRegion={...} ref={map => { this.map = map }}>
<Marker coordinate={this.state.coordinate} />
</MapView>
<Image source={{ uri: this.state.mapSnapshot.uri }} />
<TouchableOpacity onPress={this.takeSnapshot}>
Take Snapshot
</TouchableOpacity>
</View>
);
}
这样的事情:我想点击一个按钮来拍摄快照
https://github.com/react-native-community/react-native-maps#take-snapshot-of-map
const snapShot = () => {
takeSnapshot({
width: 300, // optional, when omitted the view-width is used
height: 300, // optional, when omitted the view-height is used
format: "png", // image formats: 'png', 'jpg' (default: 'png')
quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1)
result: "file", // result types: 'file', 'base64' (default: 'file')
});
snapshot.then((uri) => {
console.log(uri);
});
};
return(
<TouchableOpacity onPress={snapShot}>
<AppText>Get snapshot</AppText>
</TouchableOpacity>
)
答案 0 :(得分:1)
希望我能正确理解您的意图。 我没有测试以下代码,但我想应该是这样的:
import React, {useState, useRef} from 'react';
import {View} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
export const Map= ({coordinate}) => {
const [mapSnapshotUri, setMapSnapshotUri] = useState(null);
const map = useRef(null);
const snapShot = () => {
const snapshot = map.current.takeSnapshot({
width: 300, // optional, when omitted the view-width is used
height: 300, // optional, when omitted the view-height is used
format: 'png', // image formats: 'png', 'jpg' (default: 'png')
quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1)
result: 'file', // result types: 'file', 'base64' (default: 'file')
});
snapshot.then((uri) => {
setMapSnapshotUri(uri);
});
};
return (
<View>
<MapView ref={map}>
<Marker coordinate={coordinate}/>
</MapView>
<TouchableOpacity onPress={snapShot}>
<AppText>Get snapshot</AppText>
</TouchableOpacity>
</View>
);
};