Skip to content

Commit bc2fc0a

Browse files
thomasdacostathomasdacosta
committed
fix: ajuste no projeto
1 parent 330947c commit bc2fc0a

21 files changed

+13133
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
- https://snack.expo.dev/@thomasdacostaprof/aula_14_2_armazenamento_mmkv
5454
- https://snack.expo.dev/@thomasdacostaprof/aula_15_promise_fecth
5555
- https://snack.expo.dev/@thomasdacostaprof/aula_16_webview
56+
- https://snack.expo.dev/@thomasdacostaprof/aula_17_contextapi
5657
- https://snack.expo.dev/@thomasdacostaprof/aula_18_reactnativeelements
5758

5859
## Objetivo

‎aula_17_contextapi/.gitignore‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
11+
# Native
12+
*.orig.*
13+
*.jks
14+
*.p8
15+
*.p12
16+
*.key
17+
*.mobileprovision
18+
19+
# Metro
20+
.metro-health-check*
21+
22+
# debug
23+
npm-debug.*
24+
yarn-debug.*
25+
yarn-error.*
26+
27+
# macOS
28+
.DS_Store
29+
*.pem
30+
31+
# local env files
32+
.env*.local
33+
34+
# typescript
35+
*.tsbuildinfo

‎aula_17_contextapi/App.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {Text, StyleSheet, Button, View} from 'react-native';
2+
import {createNativeStackNavigator} from "@react-navigation/native-stack";
3+
import {NavigationContainer} from "@react-navigation/native";
4+
import {useNavigation} from '@react-navigation/native';
5+
import Tela1 from './Tela1'
6+
import Tela2 from './Tela2'
7+
import Tela3 from './Tela3'
8+
import {UsuarioProvider} from "./Contexts";
9+
10+
const Stack = createNativeStackNavigator();
11+
12+
const Tela = () => {
13+
const navigation = useNavigation();
14+
15+
return (
16+
<View style={styles.container}>
17+
<View>
18+
<Text style={styles.paragraph}>Tela principal da Navegação</Text>
19+
</View>
20+
<View>
21+
<Button onPress={() => navigation.navigate("Tela1")} title="Ir para a Tela 1"/>
22+
</View>
23+
</View>
24+
);
25+
}
26+
27+
export default function App() {
28+
return (
29+
<UsuarioProvider>
30+
<NavigationContainer>
31+
<Stack.Navigator initialRouteName="Tela">
32+
<Stack.Screen name="Tela" component={Tela}/>
33+
<Stack.Screen name="Tela1" component={Tela1}/>
34+
<Stack.Screen name="Tela2" component={Tela2}/>
35+
<Stack.Screen name="Tela3" component={Tela3}/>
36+
</Stack.Navigator>
37+
</NavigationContainer>
38+
</UsuarioProvider>
39+
);
40+
}
41+
42+
const styles = StyleSheet.create({
43+
container: {
44+
flex: 1,
45+
justifyContent: 'center',
46+
backgroundColor: '#ecf0f1',
47+
padding: 8,
48+
},
49+
paragraph: {
50+
margin: 24,
51+
fontSize: 18,
52+
fontWeight: 'bold',
53+
textAlign: 'center',
54+
},
55+
});

‎aula_17_contextapi/Contexts.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { createContext } from "react";
2+
3+
const UsuarioContext = createContext({});
4+
5+
export const UsuarioProvider = ({ children }) => {
6+
const usuario = {
7+
contexto: "Contexto de Usuário",
8+
nome: "João",
9+
idade: 25,
10+
curso: "Tecnologia em Analise e Desenvolvimento de Sistemas",
11+
disciplina: "Programação para Dispositivos Móveis II",
12+
ano: 2023
13+
};
14+
15+
return (
16+
<UsuarioContext.Provider value={ usuario }>
17+
{children}
18+
</UsuarioContext.Provider>
19+
);
20+
}
21+
22+
export default UsuarioContext;

‎aula_17_contextapi/README.MD‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Aula 17 – Context API
2+
3+
A Context API é uma das APIs mais importantes oferecidas pelo React para gerenciar o estado e propriedades de forma eficiente, especialmente quando você precisa passar dados através da árvore de componentes sem ter que passá-los manualmente através de props em cada nível.
4+
5+
## Tela do Aplicativo
6+
7+
![Tela](screen1.png) ![Tela](screen2.png) ![Tela](screen3.png) ![Tela](screen4.png) ![Tela](screen5.png)
8+
9+
## Expo
10+
11+
- https://snack.expo.dev/@thomasdacostaprof/aula_17_contextapi

‎aula_17_contextapi/Tela1.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Text, StyleSheet, Button, View } from 'react-native';
2+
import { useNavigation } from '@react-navigation/native'
3+
4+
const Tela1 = () => {
5+
const navigation = useNavigation();
6+
7+
return (
8+
<View style={styles.container}>
9+
<View>
10+
<Text style={styles.paragraph}>Tela 1 da Navegação</Text>
11+
</View>
12+
<View>
13+
<Button onPress={() => navigation.navigate("Tela2")} title="Ir para a Tela 2" />
14+
</View>
15+
</View>
16+
);
17+
}
18+
19+
export default Tela1;
20+
21+
const styles = StyleSheet.create({
22+
container: {
23+
flex: 1,
24+
justifyContent: 'center',
25+
backgroundColor: '#ecf0f1',
26+
padding: 8,
27+
},
28+
paragraph: {
29+
margin: 24,
30+
fontSize: 18,
31+
fontWeight: 'bold',
32+
textAlign: 'center',
33+
},
34+
});

‎aula_17_contextapi/Tela2.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Text, StyleSheet, Button, View } from 'react-native';
2+
import { useNavigation } from '@react-navigation/native'
3+
import {useContext} from "react";
4+
import UsuarioContext from "./Contexts";
5+
6+
const Tela2 = () => {
7+
const ctx = useContext(UsuarioContext);
8+
const {contexto, nome, idade, curso, disciplina, ano} = ctx;
9+
const navigation = useNavigation();
10+
11+
return (
12+
<View style={styles.container}>
13+
<View>
14+
<Text style={styles.paragraph}>Contexto: {contexto}</Text>
15+
<Text style={styles.paragraph}>Nome: {nome}</Text>
16+
<Text style={styles.paragraph}>Idade: {idade}</Text>
17+
<Text style={styles.paragraph}>Curso: {curso}</Text>
18+
<Text style={styles.paragraph}>Disciplina: {disciplina}</Text>
19+
<Text style={styles.paragraph}>Ano: {ano}</Text>
20+
<Text style={styles.paragraph}>Tela 2 da Navegação</Text>
21+
</View>
22+
<View>
23+
<Button onPress={() => navigation.navigate("Tela3")} title="Ir para a Tela 3" />
24+
</View>
25+
</View>
26+
);
27+
}
28+
29+
export default Tela2;
30+
31+
const styles = StyleSheet.create({
32+
container: {
33+
flex: 1,
34+
justifyContent: 'center',
35+
backgroundColor: '#ecf0f1',
36+
padding: 8,
37+
},
38+
paragraph: {
39+
margin: 24,
40+
fontSize: 18,
41+
fontWeight: 'bold',
42+
textAlign: 'center',
43+
},
44+
});

‎aula_17_contextapi/Tela3.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Text, StyleSheet, Button, View } from 'react-native';
2+
3+
const Tela3 = () => {
4+
return (
5+
<View style={styles.container}>
6+
<View>
7+
<Text style={styles.paragraph}>Tela 3 da Navegação</Text>
8+
</View>
9+
<View>
10+
<Button onPress={() => alert("Chegou no fim da navegação")} title="Fim" />
11+
</View>
12+
</View>
13+
);
14+
}
15+
16+
export default Tela3;
17+
18+
const styles = StyleSheet.create({
19+
container: {
20+
flex: 1,
21+
justifyContent: 'center',
22+
backgroundColor: '#ecf0f1',
23+
padding: 8,
24+
},
25+
paragraph: {
26+
margin: 24,
27+
fontSize: 18,
28+
fontWeight: 'bold',
29+
textAlign: 'center',
30+
},
31+
});

‎aula_17_contextapi/app.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"expo": {
3+
"name": "aula_17_contextapi",
4+
"slug": "aula_17_contextapi",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"userInterfaceStyle": "light",
9+
"splash": {
10+
"image": "./assets/splash.png",
11+
"resizeMode": "contain",
12+
"backgroundColor": "#ffffff"
13+
},
14+
"assetBundlePatterns": [
15+
"**/*"
16+
],
17+
"ios": {
18+
"supportsTablet": true
19+
},
20+
"android": {
21+
"adaptiveIcon": {
22+
"foregroundImage": "./assets/adaptive-icon.png",
23+
"backgroundColor": "#ffffff"
24+
}
25+
},
26+
"web": {
27+
"favicon": "./assets/favicon.png"
28+
}
29+
}
30+
}

‎aula_17_contextapi/assets/adaptive-icon.png‎

17.1 KB
Loading

0 commit comments

Comments
 (0)