**Tek Bir Bütün**
Bazıları hayatta böyle şeylere inanmaz belki, ama kimisi de iki yarımın birbirini bulup tek bir bütün olduğuna yürekten inanır. Onları hiçbir şey ayıramaz, ölüm dışında tabii, bunun önüne geçilemez.
Aşk, sadakat, şefkat, bağlılık… Bunlar, gerçek bir ailede hüküm süren duygulardır. Eşlerin bir bütün olduğu ailelerde.
Elif ile Mehmet de böyle yaşadı. Büyük bir aşkla evlenmişlerdi, ilk günden beri birbirlerine destek oldular, hep yan yana durdular.
“Elifçiğim, seninle Mehmet’e bakıyorum da, nasıl bu kadar uyumlusunuz anlamıyorum. Sanki birbirinizin yarısıs# 8.5 – Criando um aplicativo com React Native
## 8.5.1 – O que é React Native?
O React Native (RN) é um framework desenvolvido pelo Facebook para criação de aplicativos mobile nativos, utilizando JavaScript e React. Ele permite que você construa aplicações mobile para Android e iOS utilizando um único código-base, compartilhando grande parte da lógica entre as plataformas.
## 8.5.2 – Diferenças entre React e React Native
Embora o React e o React Native compartilhem muitos conceitos, existem diferenças essenciais:
– **Componentes**: No React, usamos componentes como `
– **Estilização**: No React, usamos CSS. No RN, usamos um sistema de estilos baseado em JavaScript, semelhante ao CSS, mas com algumas diferenças.
– **Navegação**: No React, usamos React Router. No RN, usamos bibliotecas específicas como React Navigation ou React Native Navigation.
## 8.5.3 – Configurando o ambiente
Para começar a desenvolver com React Native, você precisará configurar seu ambiente. Existem duas abordagens principais:
1. **Expo**: Uma ferramenta que simplifica o desenvolvimento, permitindo que você comece rapidamente sem configurar um ambiente nativo.
2. **React Native CLI**: Oferece mais controle e acesso a funcionalidades nativas, mas requer configuração adicional.
### Usando Expo
1. Instale o Expo CLI globalmente:
“`bash
npm install -g expo-cli
“`
2. Crie um novo projeto:
“`bash
expo init MeuApp
“`
3. Navegue até a pasta do projeto e inicie:
“`bash
cd MeuApp
expo start
“`
### Usando React Native CLI
1. Instale o React Native CLI globalmente:
“`bash
npm install -g react-native-cli
“`
2. Crie um novo projeto:
“`bash
react-native init MeuApp
“`
3. Navegue até a pasta do projeto e inicie:
“`bash
cd MeuApp
react-native run-android # ou react-native run-ios
“`
## 8.5.4 – Criando seu primeiro componente
Vamos criar um componente simples que exibe “Olá, Mundo!”:
“`javascript
import React from ‘react’;
import { View, Text, StyleSheet } from ‘react-native’;
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
text: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
});
export default App;
“`
## 8.5.5 – Estilização no React Native
No React Native, a estilização é feita usando JavaScript. O `StyleSheet.create` é usado para definir estilos que podem ser reutilizados em vários componentes.
Principais diferenças em relação ao CSS:
– Nomes de propriedades são camelCase (`backgroundColor` em vez de `background-color`)
– Valores são escritos sem unidades (`width: 100` em vez de `width: 100px`)
– Não há herança de estilo
– Não há seletores ou pseudo-classes
## 8.5.6 – Componentes básicos
Alguns dos componentes básicos mais usados no React Native:
1. **View**: Equivalente a uma `
2. **Text**: Para exibir texto. Tudo o que é texto deve estar dentro de um componente `
3. **Image**: Para exibir imagens.
4. **ScrollView**: Para conteúdo rolável.
5. **TextInput**: Para entrada de texto.
6. **Button**: Um botão básico.
7. **TouchableOpacity**: Um componente que responde ao toque com feedback visual.
## 8.5.7 – Navegação
Para navegação em aplicativos móveis, uma das bibliotecas mais populares é o React Navigation. Vamos ver como configurar uma navegação básica:
1. Instale as dependências:
“`bash
npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
“`
2. Configure a navegação:
“`javascript
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
const Stack = createStackNavigator();
const App = () => {
return (
);
};
“`
3. Crie as telas:
“`javascript
const HomeScreen = ({ navigation }) => {
return (
);
};
const DetailsScreen = () => {
return (
);
};
“`
## 8.5.8 – Acessando APIs nativas
O React Native fornece acesso a várias APIs nativas através de módulos. Por exemplo, para acessar a câmera:
1. Instale o módulo:
“`bash
expo install expo-camera
“`
2. Use no seu componente:
“`javascript
import { Camera } from ‘expo-camera’;
import { useEffect, useState } from ‘react’;
const CameraScreen = () => {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === ‘granted’);
})();
}, []);
if (hasPermission === null) {
return
}
if (hasPermission === false) {
return
}
return (
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
);
};
“`
## 8.5.9 – Desafio: Criando um aplicativo de lista de tarefas
Vamos criar um aplicativo simples de lista de tarefas para praticar os conceitos aprendidos:
1. Crie um novo projeto com Expo ou React Native CLI
2. Implemente as seguintes funcionalidades:
– Adicionar uma nova tarefa
– Marcar tarefa como concluída
