Reactjs 将类组件转换为react功能组件/挂钩

有人能帮忙把这个类组件代码转换成一个功能组件/钩子吗

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

类标记类型扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
mapSnapshot:null，
};
}
takeSnapshot（）{
此.map.takeSnapshot(
300,
300,
{
纬度：纬度-空间，
经度：经度-空间，
纬度德尔塔：0.01，
纵向延伸率：0.01*纵横比，
},
（错误，数据）=>{
如果（错误）{
控制台日志（err）；
}
this.setState（{mapsnashot:data}）；
}
);
}
render（）{
返回(
{this.map=map}}>
抓拍
);
}

类似这样：我想点击一个按钮来拍摄快照

const snapShot=（）=>{
快照({
宽度：300，//可选，省略时使用视图宽度
高度：300，//可选，省略时使用视图高度
格式：“png”，//图像格式：“png”，“jpg”（默认值：“png”）
质量：0.8，//图像质量：0..1（仅与jpg相关，默认值：1）
结果：“file”，//结果类型：“file”，“base64”（默认值：“file”）
});
快照。然后（（uri）=>{
log（uri）；
});
};
返回(
获取快照
)

我希望我正确理解了你的意图。 我没有测试以下代码，但我想它应该是这样的：

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

import React，{useState，useRef}来自“React”；
从“react native”导入{View}；
从“react native maps”导入MapView，{Marker}；
导出常量映射=（{coordinate}）=>{
const[mapSnapshotUri，setMapSnapshotUri]=useState（null）；
const map=useRef（空）；
常量快照=（）=>{
const snapshot=map.current.takeSnapshot({
宽度：300，//可选，省略时使用视图宽度
高度：300，//可选，省略时使用视图高度
格式：'png'，//图像格式：'png'，'jpg'（默认值：'png'）
质量：0.8，//图像质量：0..1（仅与jpg相关，默认值：1）
结果：'file'，//结果类型：'file'，'base64'（默认值：'file'）
});
快照。然后（（uri）=>{
setMapSnapshotUri（uri）；
});
};
返回(
获取快照
);
};

当然可以，您到底需要什么帮助？我开始学习如何使用挂钩进行反应，还没有使用基于类的组件，所以我真的不知道从哪里开始。基本上，我现在不担心状态，我只想在点击按钮时能够使用此代码调用函数。我已经更新了我的问题。我不担心这个重要时刻的状态，凯，这非常有效！我现在唯一的问题是它一直在快照中显示相同的位置，因此坐标不正确。。

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