Integrações com React Native - #3 Frontend

Nesse tutorial iniciaremos o frontend da screen de cadastro e iniciaremos a integração com o banco de dados MySql.

Frontend e Mysql no React Native

views/Cadastro.js

Vamos começar criando a screen cadastro com seu referido formulário de envio de dados para o MySql.

import React,{useState,useEffect} from 'react';
import config from "../config/config.json";
import {Image, Keyboard, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import {css} from "../assets/css/Css";

export default function Cadastro({navigation}) {

    const [user,setUser]=useState(null);
    const [password,setPassword]=useState(null);
    const [email,setEmail]=useState(null);

    //Envia os dados do formulário para o backend
    async function registerUser()
    {
        let reqs = await fetch(config.urlRootNode+'create',{
            method: 'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body: JSON.stringify({
                nameUser: user,
                passwordUser: password,
                emailUser: email
            })
        });
    }

    return (
        <TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()}>
            <View style={css.container}>

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

                <View style={css.footer}>
                    <TextInput
                            style={css.input}
                            placeholder="Digite seu nome"
                            onChangeText={(text)=>setUser(text)}
                    />

                    <TextInput
                            style={css.input}
                            placeholder="Digite seu email"
                            onChangeText={(text)=>setEmail(text)}
                    />

                    <TextInput
                            style={css.input}
                            placeholder="Digite a senha:"
                            secureTextEntry={true}
                            onChangeText={(text)=>setPassword(text)}
                    />

                    <TouchableOpacity style={css.button} onPress={registerUser}>
                        <Text style={css.button__text}>Enviar</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </TouchableWithoutFeedback>
    );
}

views/index.js

No arquivo index (que chama todas as views), vamos adicionar agora a view Cadastro:

import Home from './Home';
import Cadastro from './Cadastro';

export {Home,Cadastro};

App.js

No nosso entry point vamos adicionar essa nova tela para navegação:

import {Home,Cadastro} from './views';

<Stack.Screen name="Cadastro" component={Cadastro} options={{headerShown:false}} /><

views/Home.js

Vamos adicionar os botões de navegação na home:

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

assets/Css.js

Nossos estilos até aqui ficaram assim:

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};

config/config.json

Vamos criar as urls da api local:

"urlRootNode": "http://192.168.0.103:19000/"

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

Precisa de um professor? webdesignemfoco@gmail.com