Ahora a veces puede ser engorroso agregar un montón de tales
controles y aquí ya tenemos tres controles en el encabezado,
por ejemplo, ciertamente algo que podemos agregar pero quizás no sea óptimo.
En lugar de mantener nuestros objetos de estilo más limpios, podríamos configurar un encabezado base aquí, por
ejemplo, base de encabezado y luego agregar headerIOS y headerAndroid y ahora lo que hacemos es tomar todos estos estilos que cambian según la plataforma fuera del estilo
base, agréguelos aquí a headerIOS
y headerAndroid y en headerIOS, solo mantenemos el aspecto
de iOS aquí, tan blanco, luego este color para el borde en
la parte inferior y un ancho de píxel de ese borde y aquí en Android, eliminamos
esta marca y mantenemos el color primario como color de fondo y, por otro lado, eliminamos nuestro borde
al usar estos valores o al eliminarlo por completo y no configurarlo en
absoluto.
Ahora solo necesitamos asegurarnos de agregar headerIOS o headerAndroid y para eso, podemos subir aquí y configurar nuestro
objeto de estilos donde fusionamos todos nuestros estilos base de encabezado ahora, por lo
que estos siempre están configurados pero ahora, además, puede fusionarse en el resultado de la selección de plataforma, que ahora es un método que
toma un objeto donde tenemos que especificar una clave iOS y señalar el valor o, en este caso, el objeto que queremos
usar si estamos en iOS, que son estilos. headerIOS y agregue una clave de Android y señale
los estilos que headerAndroid y con
eso le decimos a React Native, por favor, combine las propiedades del valor, en este caso, un
objeto que estamos seleccionando para iOS y Android.
Por lo tanto, siempre tendrá que pasar un objeto a la selección de plataforma y luego tendrá valores diferentes para
iOS y Android y el valor aquí también podría ser un número, simplemente no funcionaría aquí porque
aquí realmente esperamos un objeto para que podamos extraiga todos los pares de valores de propiedad y páselos a nuestro estilo circundante.
Entonces, aquí un número no tiene sentido, pero puede usar select con cualquier tipo de valor,
aquí solo necesitamos un
objeto, por lo que apuntamos a los objetos headerIOS y headerAndroid. Y con eso, tenemos un código más ágil, tenemos estilos
más ágiles allí y luego tenemos un código con un estilo base donde luego usamos select de plataforma
para elegir dinámicamente diferentes estilos basados en la plataforma en la que estamos corriendo y, por lo tanto, ahora, Tenemos
el mismo aspecto que antes pero ahora de una manera más elegante. Otro lugar en nuestra aplicación donde podríamos aprovechar
esto es nuestro botón principal aquí. Nuestro botón principal se ve y se siente igual en ambas plataformas, lo
cual no es horrible, pero que también podría no ser lo que queremos.
Si vamos a nuestro MainButton. js, vemos que siempre usamos opacidad táctil aquí, pero en realidad
en Android, podríamos querer usar el efecto dominó.
Ahora, afortunadamente, React Native tiene el componente de retroalimentación nativa táctil incorporado que realmente nos da un objeto
táctil que tiene un efecto dominó incorporado,
por lo que queremos usarlo en Android y opacidad táctil en iOS.
Ahora, por supuesto, podemos usar la API de plataforma que, por lo tanto, también tenemos que importar de React
Native para usar un componente diferente aquí basado en la
plataforma y para eso podemos usar una característica realmente ordenada React no ha reaccionado específicamente a
React Native, pero podemos usar
en React en general, podemos configurar una variable que comience con un carácter de mayúscula para que podamos usarla como
un elemento jsx porque solo las variables de caracteres de mayúscula se pueden usar como elementos jsx y le damos un nombre al componente
de botón, el nombre depende totalmente de usted y, por defecto, esa opacidad se puede tocar.
Así que señalo el objeto de opacidad táctil aquí, sin corchetes angulados, solo apuntándolo así.
Ahora podemos agregar un if check y verificar si el sistema operativo de la plataforma es igual a Android e importante, también
verificar algo más en la
plataforma, también verificar si la versión de la plataforma es mayor o igual a 21 porque solo la versión 21 o superior de
la API de Android admite el efecto dominó.
Entonces, si ambas cosas son verdaderas, configuraremos el componente del botón en retroalimentación nativa táctil, entonces usaremos el que tiene
el efecto dominó, de lo contrario usaremos el que tiene el efecto de opacidad.
Entonces, si estamos en Android y la versión de Android es lo suficientemente alta, es 21
o superior, entonces usamos comentarios nativos táctiles. Ahora, como lo llamo con un carácter inicial mayúscula, podemos usar esto
aquí en lugar de la opacidad táctil en nuestro código jsx, parece extraño al principio pero funcionará perfectamente bien. Si ahora guardamos esto y esto se
reinicia, verá que ahora tiene ese efecto dominó, puede verlo si presionamos y mantenemos presionado, verá ese
efecto dominó en el botón. Todavía no se ve perfecto porque en realidad es
rectangular y no respeta nuestro radio de borde y lo arreglaremos,
pero funciona y, por otro lado, aquí en iOS, tenemos el efecto de opacidad como puede ver si presiona esto.
Así que ahora arreglemos el radio del borde y podemos hacerlo envolviendo esto con otra vista y eso es solo un
pequeño truco, una pequeña solución que debes tener en cuenta.
Envolvemos esto con otra vista donde configuro un estilo de, digamos contenedor de botones,
agrego ese estilo allí abajo en nuestra hoja de estilos y en ese contenedor de botones aquí que ahora está envuelto alrededor de todo,
configuro el mismo
radio de borde que establecí en el botón , 25 en este caso aquí y agrego un desbordamiento oculto, lo que significa que cualquier
componente secundario que iría más allá de los límites de estos componentes, por lo que el componente con este estilo
se recorta básicamente y esto garantizará que el efecto dominó que ahora es un El
componente hijo de esta vista se recortará en los bordes redondeados de este botón.
Entonces, si guardamos esto y volvemos a intentarlo, verá que el efecto dominó solo llena el botón, que por supuesto
se ve mucho mejor y, por supuesto, en iOS, todavía tenemos el mismo comportamiento que antes.
Por lo tanto, usar la plataforma aquí en una comprobación de if también es algo que podemos hacer,
pero también podemos usar este truco ordenado aquí para representar componentes totalmente diferentes en función de la plataforma en la que nos
estamos ejecutando.