Блог

У меня проблема с библиотекой react-native-signature-canvas. Когда я проверяю подпись в приложении с помощью эмулятора iOS и Android на своем Mac, все в порядке, и поведение правильное, но когда я публикую приложение на платформе Expo и проверяю подпись в приложении с помощью физического устройства, приложение перезапускается. Кто-нибудь знает, как я могу решить эту проблему?

Я думал, что проблема заключалась в версии react-native-signature-canvas, но проблема не в этом. Я использовал версии 3.6.0 и 4.0.0, не получив хороших результатов. Кроме того, версия Expo, которую я использую, — 41.0.0.

Ниже я пишу свою реализацию подписи с помощью библиотеки react-native-signature-canvas. Может быть, я делаю что-то не так. Большое вам спасибо за вашу помощь.

 import SignatureScreen from 'react-native-signature-canvas';
import React, {useRef, useState} from "react";
import {StyleSheet, Text, View} from 'react-native';
import Styles from "../styles/ModalPDF";
import {Divider, Modal, Portal} from "react-native-paper";
import Colors from "../constants/Colors";
import { scale } from '../services/Scaled';
import { attributeServiceHO } from "../services/AttributeServiceHO";
import {useSelector} from "react-redux";

const Signature = ({text, onOK, visible, onDismiss, setSign}) => {
    const [firma ,setFirma] = useState(null);
    const dataHistoriaOcupacional = useSelector(state => state.historiaOcupacional);
    const caso = useSelector(state => state.medicos.caso);
    const paciente = useSelector(state => state.paciente.paciente);
    const medicoData = useSelector(state => state.medicos.medicos_obj);
    const form = useSelector(state => state.medicos.siniestroSelected);
    const rutMedico = useSelector(state => state.medicos.medicos_obj.rut);
    const ref = useRef();

    const handleSignature = signature => {
        setSign(signature);
        setFirma(signature)
        if(typeof signature !== 'string'){
            setSign(signature);
        }else{
            setSign(signature);
            attributeServiceHO(dataHistoriaOcupacional, paciente, caso, medicoData, form, rutMedico)
                .then((response) => {
                    let {codigo} = response;
                    if(codigo === 200){
                        onDismiss();
                    }
                })
        }

    };



    const handleEmpty = () => {
        //console.log('Empty');
    }

    const handleClear = () => {
        //console.log('clear success!');
    }

    const handleEnd = () => {
        ref.current.readSignature();
    }

    const style = `.m-signature-pad--footer
    .button.save {
      background-color: ${Colors.primaryColorLight};
      color: ${Colors.textButtonDark};
    }
    .m-signature-pad--footer
    .button.clear {
      background-color: ${Colors.white};
      color: ${Colors.warningColorText};
    }
    `;
    return (
        <Portal>
            <Modal visible={visible} onDismiss={onDismiss} contentContainerStyle={Styles.container}>
                <View style={Styles.container}>
                    <View style={styles.preview}>
                        <Text style={Styles.title}>Firma aqui:</Text>
                        <Divider style={Styles.divider}/>
                        <SignatureScreen
                            onOK={(signature) => handleSignature(signature)}
                            onEmpty={handleEmpty}
                            descriptionText="Epeteista signature"
                            clearText="CLEAR"
                            confirmText="SIGN"
                            webStyle={style}
                        />
                    </View>
                </View>
            </Modal>
        </Portal>
    );
}

const styles = StyleSheet.create({
    preview: {
        width: scale(360),
        height: scale(415),
        backgroundColor: "#F8F8F8",
        justifyContent: "center",
        alignItems: "center"
    },
    previewText: {
        color: "#FFF",
        fontSize: 14,
        height: 40,
        lineHeight: 40,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "#69B2FF",
        width: 120,
        textAlign: "center",
        marginTop: 10
    }
});
export default Signature;