szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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


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

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

<code javascript Sign.js>
import SignatureScreen from 'react-native-signature-canvas';

const Sign = () => {
    return (
        <SignatureScreen />
    );
}

export default Sign;
</code>


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

<code javascript>
import Sign from './Sign';
//...
<Sign />
</code>


Teljes kód:

<code javascript App.js>
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Sign from './Sign';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Aláírás</Text>
      <Sign />
      <StatusBar style="auto" />
    </View>
  );
}

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

</code>

===== 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.

<code javascript>
    const handleSignature = (signature) => {
        console.log('Valami')
    }
</code>


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

<code javascript>
        <SignatureScreen 
        onOK={handleSignature}
        />
</code>

A teljes kód:

<code javascript App.js>
import SignatureScreen from 'react-native-signature-canvas';

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

export default Sign;
</code>


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

<code javascript>
    const handleSignature = (signature) => {
        
        console.log(signature)
    }
</code>

===== 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:

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

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

<code javascript Sign.js>
import SignatureScreen from 'react-native-signature-canvas';

const Sign = ({onSign}) => {
    const handleSignature = (signature) => {                
        onSign(signature)
    }
    return (
        <SignatureScreen 
        onOK={handleSignature}
        clearText='Törlés'
        confirmText='Elfogad'
        descriptionText='Írjon alá felül'
        />
    );
}

export default Sign;
</code>


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

<code javascript App.js>
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 (
    <View style={styles.container}>
      <Text>Aláírás</Text>
      <Sign 
        onSign={(img) => {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

<code javascript Sign.js>
import SignatureScreen from 'react-native-signature-canvas';

const Sign = ({onSign}) => {
    const handleSignature = (signature) => {                
        onSign(signature)
    }
    return (
        <SignatureScreen 
        onOK={handleSignature}
        />
    );
}

export default Sign;
</code>


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

<code javascript App.js>
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 (
    <View style={styles.container}>
      <Text>Aláírás</Text>
      <Sign 
        onSign={(img) => {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      <Image
      resizeMode={'contain'}
      style={{ width: 350, height: 250 }}
      source={{ uri: signature }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

</code>


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

<code javascript App.js>
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 (
    <View style={styles.container}>
      <Text>Aláírás</Text>
      <Sign 
        onSign={(img) => {
          setSignature(img)
          console.log('A képe átvéve')
        }}
      />
      <View>
        {signature ? (
          <Image
          resizeMode={'contain'}
          style={{ width: 350, height: 250 }}
          source={{ uri: signature }}
          />
        ) : null}
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

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

</code>
===== 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)
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
