Explicação do Código React Native

1. O que esse código faz?

Esse código cria um aplicativo React Native com navegação entre telas usando a biblioteca React Navigation. O app possui:
✅ Uma tela de abertura (Splash Screen) que aparece por 3 segundos.
✅ Um menu inferior de navegação (Bottom Tabs) para trocar entre as telas principais.
✅ Diferentes telas: Home, Perfil, Configurações e Sobre.

2. Como funciona o fluxo do app?

1️⃣ Quando o app inicia, ele mostra a Tela de Abertura (TelaAbertura.js).
2️⃣ Depois de 3 segundos, o app automaticamente troca para a tela principal (TabNavigator).
3️⃣ A tela principal contém um menu de abas na parte inferior para o usuário navegar entre as telas.

3. Explicação do Código

3.1. Arquivo app.js

Esse é o coração do aplicativo. Ele configura toda a navegação.

📌 Duas formas de navegação estão sendo usadas:
🔹 Stack.Navigator → Controla a tela de abertura e a tela principal.
🔹 Tab.Navigator → Controla as abas (Home, Perfil, Config, Sobre).

Trecho principal do app.js

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Abertura" component={TelaAbertura} />
        <Stack.Screen name="Principal" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

🔹 O NavigationContainer envolve tudo, pois é obrigatório para usar navegação.
🔹 O Stack.Navigator primeiro carrega a tela de abertura, depois a tela principal.

3.2. Arquivo TelaAbertura.js (Splash Screen)

Aqui está a tela inicial, que some após 3 segundos.

📌 O que esse código faz?
1️⃣ O useEffect() define um timer de 3 segundos.
2️⃣ Depois do tempo, navigation.replace("Principal") troca para a tela principal.
3️⃣ Enquanto isso, o app exibe um texto e um ícone de carregamento.

useEffect(() => {
  setTimeout(() => {
    navigation.replace("Principal");
  }, 3000); // 3 segundos
}, []);

3.3. Arquivo TabNavigator (Menu inferior)

Esse código cria o menu de abas com ícones:

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      let iconName;

      if (route.name === "Home") iconName = "home";
      else if (route.name === "Perfil") iconName = "person";
      else if (route.name === "Configurar") iconName = "settings";
      else if (route.name === "Sobre") iconName = "app-settings-alt";

      return <MaterialIcons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: "tomato",
    tabBarInactiveTintColor: "gray",
    headerShown: false,
  })}
>

📌 Aqui, o código faz o seguinte:
✅ Define ícones diferentes para cada aba.
✅ Define cores diferentes para a aba ativa (tomato) e inativa (gray).
✅ Remove os cabeçalhos (headerShown: false).

3.4. Telas Home, Perfil, Config e Sobre

Cada tela apenas exibe um texto centralizado.

Exemplo (TelaInicio.js):

export default function TelaInicio() {
  return (
    <View style={styles.container}>
      <Text>🏠 Página Inicial</Text>
    </View>
  );
}

📌 O mesmo formato é usado para as outras telas.

4. Códigos

🚀 1. App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { MaterialIcons } from "@expo/vector-icons";

import TelaAbertura from "./telas/TelaAbertura";
import TelaInicio from "./telas/TelaInicio";
import TelaPerfil from "./telas/TelaPerfil";
import TelaConfig from "./telas/TelaConfig";
import TelaSobre from "./telas/TelaSobre";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// Navegação por abas (Tabs)
function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;

          if (route.name === "Home") iconName = "home";
          else if (route.name === "Perfil") iconName = "person";
          else if (route.name === "Configurar") iconName = "settings";
          else if (route.name === "Sobre") iconName = "app-settings-alt";

          return <MaterialIcons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "tomato",
        tabBarInactiveTintColor: "gray",
        headerShown: false,
      })}
    >
      <Tab.Screen name="Home" component={TelaInicio} options={{ headerShown: false }} />
      <Tab.Screen name="Perfil" component={TelaPerfil} options={{ headerShown: false }} />
      <Tab.Screen name="Configurar" component={TelaConfig} options={{ headerShown: false }} />
      <Tab.Screen name="Sobre" component={TelaSobre} options={{ headerShown: false }} />
    </Tab.Navigator>
  );
}

// Navegação principal com tela de Splash
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Abertura" component={TelaAbertura} />
        <Stack.Screen name="Principal" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

🚀 2. TelaAbertura.js

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

export default function TelaAbertura({ navigation }) {
  useEffect(() => {
    setTimeout(() => {
      navigation.replace("Principal");
    }, 3000); // 3 segundos
  },[]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>🚀 Meu App</Text>
      <Text style={styles.text}>👨‍🏫 Washington Paiva</Text>
      <ActivityIndicator size="large" color="#007bff" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f8f9fa",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
  },
});

🚀 3. TelaConfig.js

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

export default function TelaConfig() {
  return (
    <View style={styles.container}>
      <Text>⚙️ Configurações</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

5. Resumo

✔️ O app começa na tela de abertura e, após 3 segundos, exibe um menu com 4 abas.
✔️ A navegação é feita com React Navigation, usando Stack Navigator e Bottom Tab Navigator.
✔️ O código pode ser melhorado com animações e ajustes no carregamento inicial.

Esse código é uma excelente base para um app React Native! 🚀