0

Estoy intentando hacer un Lector de Barra con un componente de expo la cual funciona bastante bien, el problema surge cuando quiero pasar los datos capturado a otro componente, no llega ni se actualiza.

https://docs.expo.io/versions/latest/sdk/bar-code-scanner/

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import Codigo from './Codigo';

export default function App() {
	const [hasPermission, setHasPermission] = useState(null);
	const [scanned, setScanned] = useState(false);
	var barra='...';
	useEffect(() => {
		(async () => {
			const { status } = await BarCodeScanner.requestPermissionsAsync();
			setHasPermission(status === 'granted');
		})();
	}, []);
	const handleBarCodeScanned = ({ type, data }) => {
		setScanned(true);
		barra = { tipo: type, codigo: data };
		alert(`Bar code with type ${type} and data ${data} has been scanned!`);
		console.log(barra);
	};

	if (hasPermission === null) {
		return <Text>Requesting for camera permission</Text>;
	}
	if (hasPermission === false) {
		return <Text>No access to camera</Text>;
	}

	return (
		<View
			style={{
				flex: 2,
				flexDirection: 'column',
				justifyContent: 'flex-end',
			}}>
			<Codigo data={barra}/>
			<BarCodeScanner
				onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
				style={StyleSheet.absoluteFillObject}
			/>
			{scanned && (
				<Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />
			)}
		</View>
	);
}
import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class Codigo extends Component {
  constructor(props){
    super(props);
    this.state = {
      connected: false,
      barra: this.props.data
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.barra) {
      console.log(nextProps.data);
    }
  }

  render(){
    return(
      <View><Text>{this.props.data}</Text></View>
    )
  }
}

En la primera parte, captura y asigna normal, pero en el segundo componente llega el valor inicial que le di ...

introducir la descripción de la imagen aquí

1 respuesta 1

0

Lo que te sucede es fácil de entender cuando entiendes el funcionamiento de los componentes como funciones y los hooks de react.

Básicamente lo que te está sucediendo es que cada vez que ejecutas el método handleBarCodeScanned este setea el valor de barra al objeto que creas, pero también hace algo interesante antes de eso, y es llamar a la función setScanned esta función es de un hook, la que maneja el estado en estas funciones, por lo que causará que tu componente se vuelva a renderizar con los valores actualizados, es decir, todo tu componente App volverá a hacer render y solo recuperará los valores que se encuentran en un estado, para este caso, los valores que hayas guardado con useState. Por lo que al volver a ejecutarse el componente, se encuentra con esta línea var barra = '...' y es por eso que tu valor no cambia.

Te recomiendo que intentes usar un useState para eso.

...
const [ barra, setBarra ] = useState('...');
...

// reemplaza tu método
const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setBarra({ tipo: type, codigo: data });
  alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};

Cualquier pregunta o inquietud no olvides comentar la respuesta y te ayudaré a resolverla

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.