Reactjs 如何访问useRef值钩子？

我正在尝试实现react本机图像裁剪视图，我正在使用：

经过一段时间的修复后，它开始工作，显然会自动生成一个输出：

我的问题是，如何获取useRef钩子的值，因为我想将其存储在redux中，这一切对我来说都是非常困惑的，代码：

import React, { useState, useRef } from 'react';
import { Button, StatusBar, StyleSheet, View, Image } from 'react-native';
import { CropView } from 'react-native-image-crop-tools';
import ImagePicker from 'react-native-image-picker';

import { connect } from 'react-redux';
import { changeNewIdeaImage } from '../../redux/actions/';

const TestImageCropper = () => {
    const [uri, setUri] = useState();
    const cropViewRef = useRef();
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <View style={styles.container}>
                <Button
                    title={'Pick Image'}
                    onPress={() => {
                        ImagePicker.launchImageLibrary(
                            { noData: true },
                            (response) => {
                                setUri(response.uri);
                            }
                        );
                    }}
                />
                {uri !== undefined && (
                    <CropView
                        sourceUrl={uri}
                        style={styles.cropView}
                        ref={cropViewRef}
                        onImageCrop={(res) => console.warn(res)}
                        keepAspectRatio
                        aspectRatio={{ width: 4, height: 4 }}
                    />
                )}
                <Button
                    title={'Get Cropped View'}
                    onPress={() => {
                        cropViewRef.current.saveImage(true, 90);

                    }}
                />
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    cropView: {
        flex: 1,
        backgroundColor: 'red',
    },
});

const mapStatetoProps = (state: any) => {};

export default TestImageCropper;

import React，{useState，useRef}来自“React”；
从“react native”导入{按钮、状态栏、样式表、视图、图像}；
从“react native image crop tools”导入{CropView}；
从“react native image picker”导入ImagePicker；
从'react redux'导入{connect}；
从“../../redux/actions/”导入{changeNewIdeaImage}；
常量TestImageCropper=（）=>{
const[uri，setUri]=useState（）；
const cropViewRef=useRef（）；
返回(
{
ImagePicker.launchImageLibrary(
{noData:true}，
（回应）=>{
setUri（response.uri）；
}
);
}}
/>
{uri！==未定义&&(
console.warn（res）}
基帕光谱比
aspectRatio={{宽度：4，高度：4}
/>
)}
{
cropViewRef.current.saveImage（true，90）；
}}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
cropView：{
弹性：1，
背景颜色：“红色”，
},
});
常量mapStatetoProps=（状态：any）=>{}；
导出默认的测试裁剪器；

现在，这是我最困惑的部分。saveImage视图函数从何而来？我如何连接它，以便将图像uri保存在Redux中以显示它

 <Button
    title={'Get Cropped View'}
                    onPress={() => {
                        cropViewRef.current.saveImage(true, 90);

                    }}
                />

{
cropViewRef.current.saveImage（true，90）；
}}
/>

提前谢谢

saveImage（）似乎是来自

CropView

的一种方法。Ref只是简单地存储（在您的例子中）呈现的

CropView

元素，因此

cropViewRef.current

基本上就是

TestImageCropper

组件中的

CropView

，您可以使用

cropViewRef.current.saveImage调用它的内置方法（true，90）

我不清楚的是，您想在redux中存储什么？ref的值是元素本身。
谢谢maten，你知道我如何访问保存的uri吗？@Fredyonge我不熟悉包本身，但saveImage（）是否返回任何内容？我尝试了const test=cropViewRef.current.saveImage（true，90），但它不会回来anything@Fredyonge这是一个猜测，但我认为它要么在状态中得到更新，要么图像被保存到设备中