createStackNavigator | React Native: Design System no seu app

Boa tarde!

Mesmo depois de seguir as orientações da aula e olhar a documentação oficial, depois de colocar o Stack e o Navigation Container o app parou de renderizar tudo.

Esse é o código do App.js:

import React from "react";
import { SafeAreaView, StatusBar, StyleSheet } from "react-native";
import Home from "./src/telas/Home";
import {createStackNavigator} from '@react-navigation/stack'
import {NavigationContainer} from '@react-navigation/native'
import 'react-native-gesture-handler';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <SafeAreaView>
        <StatusBar />
       <Stack.Navigator initialRouteName="Home">
         <Stack.Screen
         name="Home"
         component={Home}
         options={{headerShown: false}}
         />
       </Stack.Navigator>
      </SafeAreaView>
    </NavigationContainer>
  );
}

Esse é o código da Home:

import React from "react";
import Cabecalho from "./Componentes/CabecalhoHome";
import ListaProdutos from "./Componentes/ListaProdutos";

function Home() {
  return (
    <>
      <Cabecalho />
      <ListaProdutos />
    </>
  );
}

export default Home;

E esses são os componentes da Home:

import { FlatList, View, StyleSheet } from "react-native";
import { DATA } from "../../../../assets/utils/data.js";
import React from "react";
import Body from "../BodyHome";
import Produto from "../Produto";

const estilos = StyleSheet.create({
    lista: {
        backgroundColor: '#d5d5d5',
    },

    container: {
        backgroundColor: '#d5d5d5',
        padding: 5,

    }
})
function ListaProdutos() {
  return (
    <View style={estilos.container}>
      <FlatList
        numColumns={2}
        data={DATA}
        renderItem={({ item }) => <Produto {...item} />}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={<Body />}
        style={estilos.lista}
      />
    </View>
  );
}

export default ListaProdutos;

import React from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

const estilos = StyleSheet.create({
  containerInicial: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "black",
    alignItems: "center",
    paddingHorizontal: 25,
    paddingVertical: 15,
  },

  containerSecundario: {
    flexDirection: "row",
    justifyContent: 'flex-end',
    padding: 10,
    alignItems: 'center', 
  },

  botaoMatricular: {
    color: 'white',
    fontSize: 14,
    padding: 14,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 20
  },

  botaoLogin: {
    marginLeft: 15,
    color: 'white',
    fontSize: 14,
    padding: 14,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 20,
},

  textoLogo: {
    color: "white",
    fontSize: 10,
  },
});

function Cabecalho() {
  return (
    <View style={estilos.containerInicial}>
      <Text style={estilos.textoLogo}>Logo</Text>
      <View style={estilos.containerSecundario}>
      <TouchableOpacity>
        <Text style={estilos.botaoMatricular}>Matricule-se</Text>
      </TouchableOpacity>
      <TouchableOpacity>
        <Text style={estilos.botaoLogin}>Login</Text>
      </TouchableOpacity>
      </View>
    </View>
  );
}

export default Cabecalho;

import { View} from 'react-native';
import React from 'react';

function Body() {
    return (<View>
           </View>
            );
}

export default Body

Alguma idéia da razão do app não estar renderizando mais nada? Quando eu coloco o componente no App.js tudo funciona normalmente, mas usando a Stack.Navigator não há renderização.

Mergulhe em programação