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> ); }
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
Repositório Maeda