Projeto react-native na máquina cd\ -> voltar raiz mkdir workspace cd workspace

código para criar projeto react-native: npx create-expo-app --template blank meu-app y

---

executar o app npx expo start

---

Exemplo simples de navegação de tela // In App.js in a new project

import * as React from 'react'; import { View, Text, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> Home Screen <Button title='Perfil' onPress={() => navigation.navigate('Perfil')}/> <Button title='Configuração' onPress={() => navigation.navigate('Config')}/> ); }

function ProfileScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> Página de perfil ); }

function ConfigScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> Tela de Configuração ); }

const Stack = createNativeStackNavigator();

function App() { return ( <Stack.Navigator initialRouteName=''> <Stack.Screen name="Inicio" component={HomeScreen} options={{ title: 'Início' }} /> <Stack.Screen name="Perfil" component={ProfileScreen} options={{ title: 'Perfil' }} /> <Stack.Screen name="Config" component={ConfigScreen} options={{ title: 'Configuração' }} /> </Stack.Navigator> ); }

export default App;

Instalar biblioteca para manipulação de tela npm install @react-navigation/native

Installing dependencies into an Expo managed project In your project directory, run: npx expo install react-native-screens react-native-safe-area-context

Stack Navigator - O Stack Navigator fornece uma maneira para seu aplicativo fazer a transição entre telas, onde cada nova tela é colocada no topo de uma pilha. npm install @react-navigation/stack

Styled-Components -> npm install styled-components

Repositório Maeda