Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

52
Vistas
Is there any way to add an image image element in react native without reloading every other image you've added?

I am trying to make a tic-tac-toe app in react native and instead of normal crosses and o's, I wanted to use images of cats. I figured out how to add cats in but every time I add or remove one, every other image reloads and it looks very clunky. Is there any workaround for this?

Here is the code

function GameScreen() {
    
    const initialBoxVals = [0, 1, 2, 3, 4, 5, 6, 7, 8].map((idNum) => { return {
        id: idNum,
        checked: false, // eventually willl change to int of value 0 (initial state), 1 (checked by p1), 2 (checked by p3)
    }})

    const boxStates = [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
        return useState(initialBoxVals[i])
    })

  return (
    <View style={styles.container}>
        <View style={styles.board}>
            <View style={styles.row}>
                <Box id={0} />
                <Box id={1} />
                <Box id={2} />
            </View>
            <View style={styles.row}>
                <Box id={3} />
                <Box id={4} />
                <Box id={5} />
            </View>
            <View style={styles.row} >
                <Box id={6} />
                <Box id={7} />
                <Box id={8} />
            </View>
        </View>
    </View>
  )
    
    function Box(props) {
        let [box, setBox] = boxStates[props.id]
        if (box.checked === true) {
            return (
                <View style={styles.box} onTouchStart={() => setBox({...box, checked: !box.checked})}>
                    <Image style={styles.image} source={require("../assets/grumpycat.png")} />
                </View>)
        } else {
            return (
                <View style={styles.box} onTouchStart={() => setBox({...box, checked: !box.checked})}>
                </View>)
        }
    }
}

export default GameScreen;```
7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.