1 00:00:02,200 --> 00:00:06,380 Así que pasamos mucho tiempo en esta primera pantalla, pero obviamente por una buena razón, este 2 00:00:06,400 --> 00:00:11,950 curso se trata de aprender React Native después de todo y aprendiste mucho sobre el diseño, el estilo, la conexión de 3 00:00:11,980 --> 00:00:16,810 componentes, el uso de múltiples componentes y la configuración de componentes incorporados. esa es una parte central de 4 00:00:16,810 --> 00:00:23,920 React Native y lo que le permite crear aplicaciones reales al final. Sin embargo, ahora es el momento de seguir trabajando en esta 5 00:00:23,920 --> 00:00:26,840 aplicación y antes de profundizar en otras cosas que 6 00:00:27,190 --> 00:00:31,630 podríamos diseñar, lo que haré más adelante, quiero asegurarme de que este botón de inicio 7 00:00:31,840 --> 00:00:36,640 del juego funcione porque en este momento siempre estamos atrapados en esto inicio de la pantalla 8 00:00:36,640 --> 00:00:43,030 del juego, pero ahora, agregaré un segundo componente a la carpeta de pantallas, la pantalla del juego en sí, así que 9 00:00:43,210 --> 00:00:49,390 la pantalla, el contenido que quiero mostrar en la pantalla cuando el juego se está ejecutando y esa es la pantalla 10 00:00:49,390 --> 00:00:54,940 responsable de mostrando la suposición de la computadora y permitiendo que el usuario le diga a la computadora 11 00:00:54,940 --> 00:00:58,780 si está bien o mal, si el valor debe ser menor o mayor, 12 00:00:58,930 --> 00:01:01,070 entonces ese es el objetivo aquí. 13 00:01:01,120 --> 00:01:04,660 Ahora, como mencioné antes, es un componente regular, así 14 00:01:04,660 --> 00:01:11,620 que necesitamos importar React con seguridad y también importaremos algunas cosas de React Native, lo más importante, por supuesto, 15 00:01:12,010 --> 00:01:17,640 la vista y el texto, nunca puedes equivocarte con estos, También la hoja de estilo, 16 00:01:17,650 --> 00:01:20,260 por supuesto, normalmente siempre los necesita. 17 00:01:20,590 --> 00:01:28,150 Luego, aquí, podemos agregar nuestro componente funcional de la pantalla del juego, 18 00:01:28,150 --> 00:01:38,310 crear el objeto de estilos aquí usando Stylesheet. crea así y, al final, exporta nuestra pantalla de juego aquí como predeterminada y deshazte de 19 00:01:38,310 --> 00:01:40,790 esa ventaja aquí en la parte superior. 20 00:01:40,800 --> 00:01:45,340 Así que ahora tenemos ese componente de pantalla del juego 21 00:01:45,370 --> 00:01:49,980 definido aquí y ahora detengámonos brevemente y pensemos qué necesita suceder aquí. 22 00:01:50,190 --> 00:01:55,620 Ahora, al final, lo que debe suceder es que la computadora necesita hacer una suposición y 23 00:01:55,620 --> 00:01:56,460 necesita hacer una 24 00:01:56,520 --> 00:02:04,400 suposición inicialmente cuando esta pantalla se carga por primera vez, pero luego también cuando el usuario básicamente presiona el botón de esto es 25 00:02:04,410 --> 00:02:05,230 demasiado 26 00:02:05,310 --> 00:02:07,020 bajo o demasiado alto, así 27 00:02:07,020 --> 00:02:13,460 que cada vez que el usuario da una pista sobre si esa suposición es, en qué dirección del número 28 00:02:13,490 --> 00:02:18,990 real esta suposición es, por así decirlo, siempre que eso suceda, queremos generar una nueva suposición. 29 00:02:19,080 --> 00:02:27,240 Ahora, la conjetura en sí misma debería ser un número aleatorio y, por lo tanto, comenzaré creando una nueva función fuera 30 00:02:27,360 --> 00:02:28,740 de mi componente 31 00:02:28,740 --> 00:02:35,700 funcional ahora porque no usará ningún dato de allí, por lo que no debería recrearse en cada representación 32 00:02:35,700 --> 00:02:38,190 de los componentes simplemente para ahorrar algo 33 00:02:38,250 --> 00:02:44,820 de rendimiento, si no confía en accesorios o estado, también puede simplemente tener una función que se 34 00:02:44,820 --> 00:02:48,210 encuentre fuera de su componente y nombraré esto generar 35 00:02:51,000 --> 00:02:52,770 aleatoriamente porque eso es 36 00:02:52,770 --> 00:02:54,920 lo que hará esta función. 37 00:02:54,930 --> 00:03:00,360 Es una función, generará un número aleatorio entre un mínimo y un máximo y 38 00:03:00,360 --> 00:03:02,010 que también nos permite 39 00:03:02,070 --> 00:03:09,510 excluir ciertos números, por ejemplo, el primer número que generamos debe excluir la solución para que el dispositivo, la 40 00:03:09,510 --> 00:03:14,010 aplicación nunca adivine la elección del usuario en el primer intento. 41 00:03:14,010 --> 00:03:21,210 Ahora aquí, el mínimo se normalizará a Matemáticas. Techo mínimo, por lo que básicamente para 42 00:03:21,210 --> 00:03:31,160 tener un número entero aquí si se ingresa un número no entero y redondearlo hacia arriba y max se hará un piso 43 00:03:31,160 --> 00:03:42,000 para hacer lo mismo pero redondeado hacia abajo. Entonces tendré mi número aleatorio que genero con Math. al azar y 44 00:03:42,810 --> 00:03:45,920 matemáticas. random nos da un 45 00:03:45,930 --> 00:03:54,470 número aleatorio entre 0 y 1, por lo que para tener un número entre min y max, tenemos que multiplicar esto con max - min 46 00:03:54,970 --> 00:04:05,880 y luego también al final, agregue min aquí pero también asegúrese de llamar a Math. en el resultado de toda esta operación aquí y esto le 47 00:04:05,880 --> 00:04:10,410 dará un número aleatorio entre este mínimo y máximo. 48 00:04:13,340 --> 00:04:14,620 Ahora con eso 49 00:04:14,630 --> 00:04:20,750 generado, quiero verificar si el número aleatorio es igual al número que queremos excluir, lo que, por supuesto, 50 00:04:20,750 --> 00:04:28,200 sería una coincidencia muy rara, pero puede suceder, en cuyo caso devolveré el resultado de otra generación aleatoria entre llama donde simplemente 51 00:04:28,200 --> 00:04:33,300 reenvío min, max y excluyo lo que obtuvimos, por lo que simplemente repetiré generar aleatorio 52 00:04:33,300 --> 00:04:39,440 entre y devolver el valor de esa ejecución repetida si obtenemos el valor excluido nuevamente, lo repetiremos una 53 00:04:39,460 --> 00:04:43,700 vez más, así que finalmente Llegaremos allí y si no tenemos el 54 00:04:43,920 --> 00:04:49,140 número excluido, que debería ser el caso en la mayoría de los casos, entonces devolveré 55 00:04:49,140 --> 00:04:51,030 ese número aleatorio de inmediato. 56 00:04:51,030 --> 00:04:55,940 Entonces esta es una función que nos genera un número aleatorio. 57 00:04:56,050 --> 00:05:06,070 Ahora aquí en la pantalla del juego, quiero administrar algún estado, así que importaré el gancho useState de React e inicializaré algún estado aquí con el número 58 00:05:06,700 --> 00:05:12,040 aleatorio porque el estado que quiero administrar aquí es la suposición de la computadora, 59 00:05:12,040 --> 00:05:15,400 la corriente supongo y eso también necesita una 60 00:05:15,490 --> 00:05:21,640 función de conjetura actual establecida para que podamos cambiar esto cada vez que el usuario dé 61 00:05:21,640 --> 00:05:22,900 una nueva pista. 62 00:05:22,900 --> 00:05:29,410 Entonces, aquí podemos llamar a generar aleatorio entre para generar un estado inicial que se guardará y esto solo se 63 00:05:29,410 --> 00:05:31,990 considerará como un estado inicial, por lo 64 00:05:31,990 --> 00:05:37,540 que cuando este componente se reconstruya y, por lo tanto, se vuelva a llamar al estado de 65 00:05:37,540 --> 00:05:43,810 uso, generaremos otro número aleatorio nuevamente, pero esto no anulará ese estado porque una vez que el estado se 66 00:05:43,810 --> 00:05:47,560 establece inicialmente, no se anulará nuevamente agregando el valor derivado aquí. 67 00:05:47,570 --> 00:05:54,190 React solo lo tendrá en cuenta si aún no tenemos un estado inicial, a partir de entonces, este estado 68 00:05:54,190 --> 00:06:00,400 inicial o actualizado se administrará de forma separada del componente y esta llamada no lo anulará nuevamente. 69 00:06:00,400 --> 00:06:05,640 Inicialmente, sin embargo, tenemos que hacer esta llamada, queremos obtener un número aleatorio entre 1 y 70 00:06:05,650 --> 00:06:08,170 100, 100 está excluido con la lógica 71 00:06:08,200 --> 00:06:12,700 que escribimos allí, por lo que será un número entre 1 y 99, 99 72 00:06:12,790 --> 00:06:15,580 incluido y quiero excluir La elección del usuario. 73 00:06:16,210 --> 00:06:19,040 Espero obtener esto en mis accesorios aquí, por lo que 74 00:06:19,150 --> 00:06:25,480 la elección del usuario podría ser un nombre de accesorio que usamos aquí y ese es el valor que quiero ejecutar porque 75 00:06:25,480 --> 00:06:26,350 esa es 76 00:06:26,440 --> 00:06:30,310 la solución al final y no podremos adivinar la solución de inmediato, eso 77 00:06:30,310 --> 00:06:31,480 sería un poco injusto.