React-Native: Criando um módulo nativo

Índice

1 Dica
2 Step 1
3 STEP 2
4 Step 3
5 Step 4
6 Step 6
7 Step 7
8 Conclusão

Fala, pessoal, tudo joia? Hoje, vou escrever sobre o desenvolvimento de módulos nativos para o react-native. A ideia surgiu após eu ter que desenvolver um módulo para integrar ao SDK de um gateway de pagamentos. Neste post, vamos fazer algo mais simples. No entanto, já vai servir como um norte para quem precisar desenvolver algo mais complexo ou apenas agregar conhecimento.

Dica

Para o melhor aproveitamento desse tutorial, certamente, é bom que você tenha conhecimentos prévios sobre desenvolvimento Android nativo. Caso não tenha, recomendo que, antes, estude um pouco sobre Activities e o ciclo de vida delas e, depois, volte a este artigo.

Step 1

Vou considerar que você já tem familiaridade com React-Native e, assim, vou pular a parte de criação do projeto. E, caso você tenha dúvidas de como fazer isso, dê uma olhadinha neste artigo.

STEP 2

Já que o nosso projeto foi criado, podemos começar a brincadeira! Para isso, abra a pasta android no Android Studio. bye bye, memória RAM.

Vamos criar nossa Activity, que neste exemplo, será uma tela que exibe a logo do React-Native e um botão com o texto “voltar ao RN”, mas você poderia criar qualquer coisa aqui. Por isso, sinta-se livre para voar!

Então, crie uma Activity chamada HomeActivity e, logo após, adicione o seguinte código:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class HomeActivity extends AppCompatActivity {

    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        btn = (Button)findViewById(R.id.button);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
}

Ao verificar nosso código, podemos notar que temos uma classe que herda de AppCompatActivity, onde implementamos o método onCreate – método responsável por carregar o layout XML e outras inicializações necessárias. Também temos o método anônimo, responsável por escutar o clique no nosso botão. Sua função é, simplesmente, finalizar a activity.

Step 3

Em seguida, vamos adicionar nosso código do layout. Este layout consiste de um componente que organiza a imagem e o botão, de forma linear, na horizontal. Adicione este código no arquivo activity_home.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity"
    android:padding="16dp"
    android:orientation="vertical"
    android:fillViewport="true">


    <ImageView
        android:layout_gravity="center"
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:srcCompat="@tools:sample/avatars[5]" />

    <Button
        android:id="@+id/button"
        android:layout_marginTop="20dp"
        android:background="#358BC6"
        android:layout_below="@id/imageView2"
        android:textColor="#fff"
        android:text="Voltar ao RN"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAllCaps="false"/>
</LinearLayout>

Step 4

Agora, vamos criar nosso módulo que será responsável por iniciar nossa Activity. Aqui, você deve se atentar em 3 pontos:

Primeiramente, todo módulo tem que estender de ReactContextBaseJavaModule. Assim, vem o segundo ponto: você deve implementar o método getName, retornando o nome do seu módulo. Será por esse nome que você o chamará no React-Native.

O terceiro ponto é criar o nosso método, que será responsável por iniciar nossa Activity. Note que o método tem a notação @ReactMethod. Isso é necessário para que o método seja exposto ao JavaScript.

import android.app.Activity;
import android.content.Intent;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import javax.annotation.Nonnull;

public class HomeModule extends ReactContextBaseJavaModule {

    public HomeModule(@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Nonnull
    @Override
    public String getName() {
        return "Home";
    }

    @ReactMethod
    void navigateToHome() {
        Activity activity = getCurrentActivity();
        Intent intent = new Intent(activity, HomeActivity.class);
        activity.startActivity(intent);
    }
}

Step 6

Em seguida, precisamos registrar nosso módulo, ou seja, vamos criar uma nova classe que deve estender de ReactPackage. No método createNativeModules, devemos adicionar nosso módulo e retornar a lista de módulos, como no código a seguir:

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import javax.annotation.Nonnull;

public class HomeReactPackage implements ReactPackage {
    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new HomeModule(reactContext));
        return modules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Step 7

Por fim, vamos adicionar nosso HomeReactPackage à lista de pacotes do MainApplication. Isso é parecido ao que acontece quando instalamos uma lib de terceiros e precisamos executar o react-native link. Para isso, basta adicionar, manualmente, a linha destacada.

     @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new HomeReactPackage() // adicione essa linha
            );
        }

Com isso, terminamos toda a configuração na parte nativa. Em seguida, vamos abrir o nosso projeto no VSCode (I Love VsCode S2).

Nosso arquivo App.js ficará como abaixo:

import React, { Component } from "react";

import { Text, View, StyleSheet, TouchableOpacity, NativeModules } from 'react-native'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => NativeModules.Home.navigateToHome()}
        >
          <Text style={styles.textColor}>Chamar Módulo Nativo</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  button: {
    width: '80%',
    height: 40,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center'
  },

  textColor: {
    color: 'white'
  }
})

Perceba que, para chamar nosso módulo nativo, usamos o NativeModules disponível no React-Native. O seguinte trecho de código faz a chamada ao método que criamos dentro do nosso módulo:

 NativeModules.Home.navigateToHome()

Dessa forma, é só executar o app e ser feliz! Como resultado, você deverá ter a seguinte tela.

result to app make in react-native — react-native

Conclusão

Em suma, neste artigo desenvolvemos um módulo nativo Android, bem simples, mas que serve como um norte para soluções mais complexas como, por exemplo, integrar ao SDK de gateways de pagamentos. Enfim, finalizamos este tutorial.

Agradeço por ter chegado até aqui e, caso você tenha gostado deste artigo, me adicione ao seu Linkedin e veja outros artigos que fiz no Medium.

Agradeço, também, à Impulso, pelo espaço!