Meu Primeiro App com React Native - #22 Edição com QRCode

Neste tutorial faremos a screen de edição do sistema com a leitura do QRCode e update dos dados no banco.

Edição de dados com QRCode

Nós precisaremos instalar o módulo BarCodeScaner:

expo install expo-barcode-scanner

views/arearestrita/Edicao.js

Será o arquivo responsável pela leitura do QRCode e edição dos dados.

import React, {useState,useEffect} from 'react';
import {Text, View, Button, TextInput, TouchableOpacity} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import MenuAreaRestrita from "../../assets/components/MenuAreaRestrita";
import { BarCodeScanner } from 'expo-barcode-scanner';
import {css} from '../../assets/css/Css';

export default function Edicao({navigation}) {
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);
    const [displayQR, setDisplayQR] = useState('flex');
    const [displayForm, setDisplayForm] = useState('none');
    const [code, setCode] = useState(null);
    const [product, setProduct] = useState(null);
    const [localization, setLocalization] = useState(null);

    useEffect(() => {
        (async () => {
            const { status } = await BarCodeScanner.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    //Leitura do código QR
    async function handleBarCodeScanned({ type, data }){
        setScanned(true);
        setDisplayQR('none');
        setDisplayForm('flex');
        setCode(data);
    }

    async function sendForm() {

    }

    return (
        <View>
            <MenuAreaRestrita title='Edição' navigation={navigation} />

            <BarCodeScanner
                    onBarCodeScanned={scanned ? undefined : value=>handleBarCodeScanned(value)}
                style={css.qr__code(displayQR)}
            />

            <View style={css.qr__form(displayForm)}>
                <Text>Código do Produto: {code}</Text>

                <View style={css.login__input}>
                    <TextInput
                            placeholder='Nome do Produto:'
                            onChangeText={text=>setProduct(text)}
                        value={product}
                    />
                </View>

                <View style={css.login__input}>
                    <TextInput
                            placeholder='Localização do Produto:'
                            onChangeText={text=>setLocalization(text)}
                        value={localization}
                    />
                </View>

                <TouchableOpacity style={css.login__button} onPress={()=>sendForm()}>
                    <Text>Atualizar</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

assets/css/Css.js

No arquivo css vamos criar a propriedade qr__form e a propriedade qr__code , que vai ser uma função:

,
qr__code:(display='flex')=>({
    width:'100%',
    height:'100%',
    backgroundColor:'#000',
    justifyContent:'center',
    display: display
}),
qr__form:(display='none')=>({
  width: '100%',
  display:display
})

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com