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={ {uri: "https://reactnative.dev/docs/assets/p_cat1.png"} }
       style={ {width: 200, height: 200} }
     />
<ScrollView>
<TextInput>

Button

     <Button
       onPress={() => {
         setIsHungry(false);
       }}
       disabled={!isHungry}
       color="#841584"
       title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
     />

Customizado

const logo = {
 uri: 'https://reactnative.dev/img/tiny_logo.png',
 width: 64,
 height: 64
};

Plataform

import { Plataform, Text } from 'react-native'
if (Platform.OS === 'android') { return <Text>ANDROID</text> }

Iniciar server

Inicar o React para desenvolvimento e testes

expo start

ou

yarn start

Code Sample

APP

app.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import Main from './scr/Main.js';
import { StyleSheet, Text, View, Button } from 'react-native';
/* FIM */
export default Main

scr/Main.js

import React from 'react'
import { Text, View, Button } from 'react-native'
/******************************************************/
import Book, { C1 } from './components/Books';
import css from './components/Styles';
export function Main()
{
    return (
       <View style={css.fundo}> 
       <View style={ {flex:1} }></View>
       </View>
    )
}
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