0

Estoy haciendo un juego de memoria con React ative y estoy atascada en el siguiente problema:

Necesito pasarle unas posiciones a mi matriz por medio de los props FILA y COLUMNA para que el manejador de evento handlePressReseat, por medio del método setMatriz, pueda inyectarlo y así, por medio de useEffect, pueda validar mi probabilidad y hacer que si el Cell tiene la misma imagen, me diga que son iguales.

COMPONENTE HIJO

const Cell = (props) => {

    const {icon,isReseat,fila,columna, onPress,isIgual,} = props
    const [mostrarCarta, setMostrarCarta] = useState(false);

    const handlePress = () => {
        if (!mostrarCarta) {
            setMostrarCarta(true);
            onPress();
        }
    };

  return (
      <View style={styles.box}>
        <TouchableOpacity onPress={handlePress} style={styles.boxTouch}>
            {mostrarCarta && (
                <Image source={icon} style={isIgual ? styles.boxImagennn : styles.boxImage} />)}
        </TouchableOpacity>
      </View>
  );};

COMPONENTE PADRE

const Tablero = () => {

    const [reseat, setReseat] = useState(false);
    const [matriz, setMatriz] = useState([
    ['L', 'C'],
    ['C', 'L'],
    ]);
    const [sonIguales, setSonIguales] = useState(false);

    useEffect(() => {
      if ( matriz[0][0] === matriz[1][1]) {
          setSonIguales(true);
      }
    }, [matriz]);


    const handlePressReseat = () => {
        setReseat(true);
        setMatriz()
    }

    return(
        <View style={styles.boxGame}>
            <View style={styles.boxTitle}>
                <Text style={styles.title} >Juego de Memoria</Text>
            </View>
            <View style={styles.boxItem}>
                <Cell icon={moon} isReseat={reseat} fila={0} columna={0} isIgual={sonIguales} onPress={setMatriz} />
                <Cell icon={heart} isReseat={reseat} fila={0} columna={0} isIgual={sonIguales} onPress={setMatriz}/>
            </View>
            <View style={styles.boxItem}>
                <Cell icon={heart} isReseat={reseat} fila={0} columna={0} isIgual={sonIguales} onPress={setMatriz} />
                <Cell icon={moon} isReseat={reseat} fila={0} columna={0} isIgual={sonIguales} onPress={setMatriz} />
            </View>
            <Button
            title= 'reseat'
            onPress={handlePressReseat}
            />
        </View>
    );
4
  • no se entiende bien cual es el problema, estas llamando a la funcion Cell y le estas pasando las propiedades, cual es el problema?
    – Enzo
    el 27 ago. 2020 a las 17:19
  • es un juego de memoria... hice llame (4) Cell y a cada uno le asigne una imagen, Deberia al hacer touch identificar la pocision de las dos imagenes iguales, cree la matriz, en Tablero, y asu vez se la pase con props fila y columa al componente Cell, debo pasar la pocision de matriz del hijo al padre para que esta pueda validar mi condicional que si dos componentes tengan la misma posicion y coincida la imagen guarde y permita generar un cambie en dicha imagen...??? me entiendez?... el detalle esta en const matriz y los onpress el 27 ago. 2020 a las 17:22
  • ok pero donde esta el error, cual es? dices que necesitas pasarle la posiciones de la matriz, pero no veo que se la pases en ningun lado, el error que veo, es que estas llamando a un set en el onPress de cada Cell y eso no tendra ningun efecto al hacer press
    – Enzo
    el 27 ago. 2020 a las 17:27
  • si, estaba probando algo y no quite ese codigo, Obvia. para pasarle la fila y columna al hijo y al padre... para que el handlePressReseat del padre al hacer setMatriz, me agarre junto al hijo en handlePress que prodia hacer????? ..... para que me guarde las pocisiones al hacer touch y asi validar mi condicional el 27 ago. 2020 a las 17:38

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.