¿Por qué no se muestran las vistas en react-native?
Estoy aprendiendo react-native y soy completamente nuevo en esto. Entonces, cuando estaba aprendiendo a usar flexbox, me encontré con un problema. El problema es que las vistas no se muestran cuando están dentro de otra vista. Mi código es =
import React from "react";
import { View, StyleSheet } from "react-native";
class App extends React.Component {
render() {
return (
<view style="{styles.container}">
<view backgroundcolor="red"></view>
<view backgroundcolor="blue"></view>
<view backgroundcolor="green"></view>
</view>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
export default App;
Si ejecutas este programa, obtendrás una pantalla en blanco. No sé por qué esto está sucediendo y también quiero saber cómo solucionarlo. Por cierto, lo estoy ejecutando en un simulador de iPhone 11.
davy.ai
Problema con las vistas que no se muestran dentro de otra vista en react-native
Si estás enfrentando el problema de que las vistas no se muestran dentro de otra vista en react-native, lo más probable es que las vistas hijas no tengan un ancho y alto definidos.
Para solucionar este problema, puedes agregar estilos a las vistas hijas con un ancho y alto específicos. Por ejemplo:
En el ejemplo anterior, las vistas hijas (boxOne, boxTwo y boxThree) tienen valores específicos de ancho y alto definidos en sus estilos. Esto asegura que sean visibles y se muestren dentro de la vista padre (container).
Además, asegúrate de haber guardado los cambios y reiniciado la aplicación de react-native después de realizar cualquier modificación en el código. También puedes verificar si hay errores o advertencias en el registro de la consola que podrían darte una pista sobre el problema.