Mudanças entre as edições de "React Native"
Ir para navegação
Ir para pesquisar
| Linha 56: | Linha 56: | ||
== Iniciar server == | == Iniciar server == | ||
Inicar o React para desenvolvimento e testes | Inicar o React para desenvolvimento e testes | ||
| + | expo start | ||
| + | ou | ||
yarn start | yarn start | ||
| + | |||
| + | == Code Sample == | ||
| + | |||
| + | app.js | ||
| + | import { StatusBar } from 'expo-status-bar'; | ||
| + | import React from 'react'; | ||
| + | import Main from './src/Main.js'; | ||
| + | import { StyleSheet, Text, View, Button } from 'react-native'; | ||
| + | # | ||
| + | export default Main | ||
== Bibliotecas == | == Bibliotecas == | ||
https://www.youtube.com/watch?v=71shcOjC_a4 | https://www.youtube.com/watch?v=71shcOjC_a4 | ||
Edição das 14h00min de 18 de julho de 2021
https://reactnative.dev/docs/getting-started
npm install --global expo-cli
Índice
Criar uma aplicação
expo init teste1 npm start npm run android npm run ios npm run web
Constates
const name = "NativeReact";
<Text>Hello, I am {name}!</Text>
Componentes
npm install @react-navigation/stack --save npm install @react-navigation/native --save
<View>
<Text>
<TextInput
style=Predefinição:Height: 40
placeholder="Type here to translate!"
onChangeText={text => setText(text)}
defaultValue={text}
/>
<Text style=Predefinição:Padding: 10, fontSize: 42>
{text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
Image
<Image>
<Image
source=Predefinição:Uri: "https://reactnative.dev/docs/assets/p cat1.png"
style=Predefinição:Width: 200, height: 200
/>
<ScrollView>
<TextInput>
Button
<Button
onPress={() => {
setIsHungry(false);
}}
disabled={!isHungry}
title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
/>
Customizado
const logo = {
uri: 'https://reactnative.dev/img/tiny_logo.png',
width: 64,
height: 64
};
Iniciar server
Inicar o React para desenvolvimento e testes
expo start
ou
yarn start
Code Sample
app.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import Main from './src/Main.js';
import { StyleSheet, Text, View, Button } from 'react-native';
#
export default Main
Bibliotecas
https://www.youtube.com/watch?v=71shcOjC_a4