Mudanças entre as edições de "React Native"

De BrapciWiki
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

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