[[oktatas:telefon:react_native|< React Native]] ====== react-native-signature-canvas ====== * **Szerző:** Sallai András * Copyright (c) 2023, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Telepítés ===== npm install react-native-signature-canvas ===== Projekt készítése ===== npx create-expo-app alairas


alairas/
  |-assets/
  |-node_modules/
  |-.gitignore
  |-App.js
  |-app.json
  |-babel.config.js
  |-package-lock.json
  `-package.json

===== A Sign komponens =====


import SignatureScreen from 'react-native-signature-canvas';

const Sign = () => {
    return (
        
    );
}

export default Sign;

===== Beépítés a fő komponensbe =====


import Sign from './Sign';
//...

Teljes kód:


import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Sign from './Sign';

export default function App() {
  return (
    
      Aláírás
      
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

===== Eredmény ===== {{:oktatas:telefon:react_native:sing-canvas.png|}} A képernyő felső részén írhatunk és a "Clear" gombbal törölhetjük. ===== Eseménykezelés ===== Kezelhető események: | onOK | Az aláírás kész | | onEnd | Egy vonal be lett fejezve | | onEmpty | Aláírás nélkül megerősítés | | onClear | Az aláírás törölve | | onBegin | Vonal kezdése | Legyen egy handleSignature() függvény, amivel reagálunk az onOK eseményre.


    const handleSignature = (signature) => {
        console.log('Valami')
    }

JSX-ben adjunk a SignatureScreen elemhez egy "onOK" attribútumot, értéke pedig a handleSignature legyen.

A teljes kód:


import SignatureScreen from 'react-native-signature-canvas';

const Sign = () => {
    const handleSignature = (signature) => {
        console.log('Valami')
    }
    return (
        
    );
}

export default Sign;

Javítsuk a handleSignature() függvényt.


    const handleSignature = (signature) => {
        
        console.log(signature)
    }

===== Tulajdonságok ===== | autoClear={false} | Ne legyen törlés | | imageType={'image/png'} | Kimeneti kép típusa | | webStyle={``} | Stílus meghatározása | Webstílus:


        webStyle={`
          .m-signature-pad--footer {
            background-color: lightblue;
            color: black;
            padding: 30px;
          }`
        }

===== Lábléc feliratai =====


import SignatureScreen from 'react-native-signature-canvas';

const Sign = ({onSign}) => {
    const handleSignature = (signature) => {                
        onSign(signature)
    }
    return (
        
    );
}

export default Sign;

===== Képet az App főkomponensben =====


import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Sign from './Sign';
import { useState } from 'react';

export default function App() {
  const [signature, setSignature] = useState();
  return (
    
      Aláírás
       {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


import SignatureScreen from 'react-native-signature-canvas';

const Sign = ({onSign}) => {
    const handleSignature = (signature) => {                
        onSign(signature)
    }
    return (
        
    );
}

export default Sign;

===== Kép megjelenítése =====


import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View } from 'react-native';
import Sign from './Sign';
import { useState } from 'react';

export default function App() {
  const [signature, setSignature] = useState();
  return (
    
      Aláírás
       {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

===== Kép láthatósága =====


import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View } from 'react-native';
import Sign from './Sign';
import { useState } from 'react';

export default function App() {
  const [signature, setSignature] = useState();
  return (
    
      Aláírás
       {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      
        {signature ? (
          
        ) : null}
      
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

===== Linkek ===== * https://github.com/YanYuanFE/react-native-signature-canvas#readme (2023) * https://blog.openreplay.com/setting-up-a-signature-canvas-in-react-native/ (2023) * https://morioh.com/p/d722bced8655 (2023)