React Native

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

Main

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

Componentes

component/style.js

import { StyleSheet } from "react-native";
const style = StyleSheet.create(
   {
       fundo:
       {
           flexGrow: 1,
           backgroundColor: 'red',
           justifyContent: 'center',
           alignItems: 'center',
           backgroundColor: '#400000',
       },
       big:
       {
           fontSize: 48,
       }
)
export default style

Bibliotecas

https://www.youtube.com/watch?v=71shcOjC_a4