Integrações com React Native - #1 Introdução

Hoje iniciaremos o curso de integrações do React Native com outras linguagens e plataformas, demonstrando como integrar os apps com Node, PHP, Python, etc.

React Native com outras linguagens

Antes de iniciarmos as integrações vamos preparar o nosso ambiente. Para isso, precisamos dos seguintes itens:

- Uma IDE (PhpStorm, Visual Studio, Sublime Text...)
- NodeJS
- Android Studio
- WampServer
- Python

Precisaremos também instalar o expo:

cd c:/
npm install -g expo-cli
expo init Project
cd Project
expo start

assets/Css.js

Esse arquivo contém o código de estilização do app:

import {StyleSheet} from "react-native";

const css = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    container__center:{
        justifyContent:'center'
    },
    header:{
        backgroundColor:'#09204A',
        padding: 5,
        width: '100%',
        height: '22%',
        paddingTop: 0,
        marginTop:0
    },
    header__img:{
        marginLeft: 'auto',
        marginRight:'auto'
    },
    footer:{
        width: '100%',
        height: '78%',
        alignItems: 'center',
        justifyContent:'center',
        backgroundColor:'#eee'
    },
    input:{
        borderRadius: 2,
        height: 60,
        padding: 10,
        backgroundColor: '#fff',
        borderWidth:1,
        borderColor:'#ccc',
        width: '80%',
        marginBottom: 20,
        fontSize: 18
    },
    texto:{
        fontSize: 20,
        textAlign:'center'
    },
    textoWidth:{
        width: '80%'
    },
    button:{
        borderRadius: 5,
        backgroundColor: '#111',
        paddingTop: 15,
        paddingRight: 30,
        paddingBottom: 15,
        paddingLeft: 30,
    },
    button__text:{
        color:'#fff',
        fontWeight:'bold',
        fontSize: 17
    }
});
export {css};

views/index.js

Tem a função única de importar as telas do nosso app:

import Home from './Home';
export {Home};

views/Home.js

Tela inicial do nosso app:

import React,{useEffect} from 'react';
import {Image, View, TouchableOpacity,Text} from "react-native";
import {css} from "../assets/css/Css";


export default function Home({navigation}) {

    return (
        <View style={css.container}>

            <View style={css.header}>
                <Image style={css.header__img} source={require('../assets/img/logo.png')} />
            </View>

            <View style={css.footer}>

                <TouchableOpacity
                        style={css.button}
                        onPress={()=>navigation.navigate('Cadastro')}
                >
                    <Text style={css.button__text}>Cadastro</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

App.js

O arquivo App.js é o entry point do nosso app e que contará com o sistema de navegação entre telas:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {Home} from './views';

export default function App() {
    const Stack = createStackNavigator();

    return (
      <NavigationContainer>
          <Stack.Navigator>
              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
          </Stack.Navigator>
      </NavigationContainer>
    );
}

app.json

Neste arquivo apenas direcionamos as imagens para a pasta assets/img:

{
  "expo": {
    "name": "Project",
    "slug": "Project",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/img/icon.png",
    "splash": {
      "image": "./assets/img/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/img/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/img/favicon.png"
    }
  }
}

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor? webdesignemfoco@gmail.com