将类组件转换为反应功能组件/挂钩

Question

谁能帮忙把这个类组件代码转换成功能组件/钩子

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>
)

Answer 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>
    );
};