功能组件的 this.refs (useRef, createRef) | 反应原生

Question

I have used this.refs on a class component and now I am refactoring it to be a functional component. I am using the ViewShot lib: https://github.com/gre/react-native-view-shot In the previous implementation it was used like the following:

You have a QR image in your app and you want to send the image on social media so you wrap it in ViewShot:

<ViewShot ref="viewShot">
<QRImage
     address={....}
     image={...}
 />
</ViewShot>

Then when you click on the share image it does the following:

    onQRImagePress = async (address: string) => {
    const viewShotRef: any = this.refs.viewShot;
    try {
        const uri = await viewShotRef.capture();
        const options: Options = {
            url: "file://" + uri,
            title: `address: ${address}`,
        };
        await Share.open(options);
    }
    catch (e) {
        console.log(`Could not screenshot the QR or share it due to: ${e}`);
    }
};

So we use the ref using the this.refs of the class. I want to do it for a functional component. preferably using hooks. I know that userRef exists but it didn't work for me. I also tried using createRef but wasn't sure how to implement it correctly.

Answer 1

for functional component you can use below hook React alredy providing useRef hook so you can use it

import React, { useRef } from 'react';
import ViewShot from "react-native-view-shot";

const Mycomponent = () =>{
 const viewShotRef =  useRef();
 // Access viewShotref 
  console.log(viewShotRef && viewShotRef.current)

 return (
     <View> 
        <ViewShot ref={viewShotRef} > {...children} </ViewShot>
     </View>
 )

}

Answer 2

import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import ViewShot from "react-native-view-shot";
 
class imageComponent = () => {
  const viewShotRef =  useRef();

  const onSave = () => {
    viewShotRef.current.capture().then(uri => {
      console.log("do something with ", uri);
    });
  }

   return (<>
      <ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
        <Text>...Something to rasterize...</Text>
      </ViewShot>
      <TouchableOpacity onPress{onSave}>....</TouchableOpacity>
   </>);
}