Estoy ejecutando una aplicación RN usando una base nativa para diseñar. Tengo cuatro elementos en mi página de inicio: un encabezado, una vista de pestaña de vreact-native-tab-view que contiene un ScrollView que ocupa aproximadamente el 70 % de la ventana gráfica y dos elementos más pequeños de 100 % de width en la parte inferior.
Sin embargo, la vista de desplazamiento llena más del 100% de la ventana gráfica y los dos elementos más pequeños se empujan hacia abajo.
Busqué en mi inspector de elementos y puedo aplicar un flexShrink a algunos de los muchos div s, pero no estoy seguro de cuál está en mi código porque es div hell cuando usas react-native. React devtools también tiene el mismo problema, excepto que es View hell.
Entonces, dos preguntas:
Como referencia, así es como lo he diseñado hasta ahora:
Inicio.tsx:
<View flex={1}> // applied a flex for the entire homepage <TabView navigationState={{ index, routes }} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={{ width: layout.width, height: "100%" }} /> <View width="100%"> <Center width="100%"> <StrengthSlider /> </Center> <AdMobBanner ...props /> </View> </View>Tés.tsx:
<View flex={1} bg="white"> <ScrollCards teas={blackTeas} /> </View>ScrollCards.tsx:
<ScrollView> <Center> {teas.length > 0 && teas.map((teaObj) => ( <TeaCard id={teaObj.id} teaData={teaObj.data} key={teaObj.id} /> ))} </Center> </ScrollView>EDITAR:
Enlace de Code Sandbox: https://codesandbox.io/s/gracious-sammet-l4tqz?file=/src/App.js&solutionWidth=402&solutionHeight=675
Tenga en cuenta que el pie de página de admob permanece debajo del contenido de las tarjetas. Debe ser adhesivo y permanecer siempre en la parte inferior de la pantalla. También noté que cuando no estoy usando el encabezado de MainStackNavigator el pie de página funciona según lo previsto, es decir, permanece pegajoso en la parte inferior, pero no veo por qué el uso del componente de encabezado ( AppBar ) debería interferir con mi pie de página.
La solución adecuada para obtener el resultado que desea es agregar un flexBasis a TabView como:
<TabView style={{ flexBasis: 0 }} // rest of the code /> ¿Por qué? TabView tiene un estilo predeterminado de flex: 1, overflow: 'hidden' (consulte el código fuente ), lo que hace que se expanda al tamaño de su hijo más grande. El flexBasis evita esto y se asegura de que la vista de pestañas tenga la altura correcta.
Recurso : este es un buen artículo sobre flexBasis vs ancho/alto: https://mastery.games/post/the-difference- between-width-and-flex-basis/
El estilo de depuración en React-Native no tiene la mejor experiencia de desarrollador. Hay algunas cosas que puede usar para ayudarlo con el estilo de depuración:
Inspector de RN: como mencionó Berci, React native tiene un menú de desarrollo donde puede seleccionar "mostrar inspector" que actúa como "inspeccionar elemento" en un navegador. Es una buena herramienta para depurar elementos que puede ver, también ayuda con la depuración de eventos de entrada/pestaña.
Color: la mayoría de las veces solo uso bordes y fondos de colores antiguos para obtener una visión clara de dónde están los elementos y su tamaño/superposición.
Comentarios y simplificación: siéntase libre de comentar los componentes que no le interesen y reemplace componentes/vistas complejos como ScrollCards con solo una vista de color simple. Esto puede ayudar a evitar que múltiples comportamientos influyan en lo que está tratando de depurar.
Navegador inspeccionar y Reaccionar devtools: si ejecuta su aplicación RN en el navegador, entonces familiarizarse con esas herramientas lo ayudará mucho. Solo tenga en cuenta que React y React-Native no son lo mismo.
Cuando depura elementos visuales, la mejor manera es comenzar en la capa superior y trabajar hacia abajo. Colorea los elementos y siéntete libre de comentar los elementos para obtener una visión más clara del problema. Siga investigando hasta que encuentre el problema, no tenga miedo de buscar en el código fuente de los paquetes que usa, a menudo ayuda a aclarar comportamientos (inesperados).
Podrías intentar reemplazar
<View flex={1}> // applied a flex for the entire homepage en Home.tsx con
<View flex="1 1 0">Ejemplo de trabajo aquí (es su código con esa línea modificada).
En cuanto a la depuración, solo puedo sugerir lo que ya se sugiere en la página de depuración nativa de reacción . ¿Ya probaste las React Developer Tools ? En chrome también puedes añadirlo como extensión desde este enlace .
No estoy seguro de si hay alguna diferencia entre la extensión de Chrome y el paquete npm, pero la extensión fue suficiente para mí al menos (por ahora).
El único problema es que también tuve problemas con la depuración en codesandbox, ya que la extensión definitivamente no funciona en los editores en línea de JavaScript (pero probablemente el paquete npm tampoco funcione para este caso específico)
Prueba esto: https://snack.expo.dev/fL0OgQ9uS
import React from 'react'; import { View, Image, StyleSheet,ScrollView,Text } from 'react-native'; const styles = StyleSheet.create({ container: { paddingTop: 50, flex:1, backgroundColor:'aqua', }, tinyLogo: { width: 200, height: 200, }, header:{ backgroundColor:'green', paddingBottom:20, }, footer:{ backgroundColor:'green', paddingTop:20, } }); const DisplayAnImage = () => { return ( <View style={styles.container}> <View style={styles.header}><Text>header</Text></View> <ScrollView> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> <Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} /> </ScrollView> <View style={styles.footer}><Text>footer</Text></View> </View> ); } export default DisplayAnImage;