This.refs для функциональных компонентов (useRef, createRef) | Реагировать родной - PullRequest
Новая
       6

This.refs для функциональных компонентов (useRef, createRef) | Реагировать родной

1 голос
/ 05 февраля 2020

Я использовал this.refs для компонента класса, и теперь я реорганизую его как функциональный компонент. Я использую библиотеку ViewShot: https://github.com/gre/react-native-view-shot В предыдущей реализации она использовалась следующим образом:

У вас есть изображение QR в вашем приложении, и вы хотите отправить изображение в соц. медиа, чтобы вы обернули его в ViewShot: 

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

Затем, когда вы нажимаете на изображение для обмена, оно делает следующее: 

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

Поэтому мы используем ссылку с использованием this.refs of класс. Я хочу сделать это для функционального компонента. желательно с помощью крючков. Я знаю, что userRef существует, но он не работает для меня. Я также пытался использовать createRef, но не знал, как правильно его реализовать.

1 Ответ

1 голос
/ 05 февраля 2020

для функционального компонента, который вы можете использовать ниже. React alredy, обеспечивающий использование useRef, чтобы вы могли использовать его 

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

}
...