ReactNative nativa Android alternativamente

En el desarrollo, a menudo nos encontramos escenarios necesitan e interacción nativa, ReactNative nos ha dado una interfaz dependiente preestablecido, entonces simplemente usarlo.

1. Inicializar un proyecto vacío, como un ejemplo:

react-native init Demo
cd Demo
react-native run-android

2. Escribir el código de Java en Android Estudio:

ToastModule nuevos hereda de la clase ReactContextBaseJavaModule, los padres y los métodos abstractos, en getName () devuelve el valor actual, que es el nombre del módulo.

#### llamada ReactNative: NativeModules.TestMode

public class ToastModule extends ReactContextBaseJavaModule{


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

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

Reescribiendo Mapa pública método <String, Object> getConstants () para proporcionar el uso ReactNative variable.

#### ReactNative 调用: NativeModules.TestMode.SHORT

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

Proporcionar un método para el uso ReactNative, que necesita para añadir comentarios @ReactMethod.

#### llamada ReactNative: NativeModules.TestMode.showToast ( "salida de prueba", NativeModules.TestMode.SHORT)

    @ReactMethod
    public void showToast(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

Proporcionar un método de devolución de llamada para su uso ReactNative, que necesita para añadir comentarios @ReactMethod, utilice la función de devolución de llamada de devolución de llamada ReactNative siempre.

#### ReactNative 调用: NativeModules.TestMode.showCall ((nombre, edad, ISMAN) => {console.log (nombre + “+” + edad + “+” + ISMAN)})

    @ReactMethod
    public void showCall(Callback callback) {
        callback.invoke("hello", 123, false);
    }

Enviar eventos es proporcionar un método para el uso ReactNative, que necesita para añadir comentarios @ReactMethod.

#### llamada ReactNative: this.call = DeviceEventEmitter.addListener ( 'evento', (datos) => {console.log ( "recibir el mensaje:", los datos)});

    @ReactMethod
    public void sendEvent() {
        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("event", count);
        count++;
    }

monitor de la actividad del ciclo de vida del módulo, la necesidad de lograr la interfaz LifecycleEventListener.

    reactContext.addActivityEventListener(this);

    @Override
    public void onHostResume() {

    }

    @Override
    public void onHostPause() {

    }

    @Override
    public void onHostDestroy() {

    }

Módulos de escucha onActivityResult, la necesidad de lograr la interfaz ActivityEventListener.

    reactContext.addLifecycleEventListener(this);

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {

    }

    @Override
    public void onNewIntent(Intent intent) {

    }

3. código completo:

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import { NativeModules, DeviceEventEmitter } from "react-native";
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import TestRN from "./TestRN";


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
    super(props)
    this.state = {
      one: '',
      two: '',
    }
  }


  componentDidMount() {
    this.call = DeviceEventEmitter.addListener('event', (data) => {
      console.log("收到消息：", data)
      this.setState({ one: data })
    });

    TestRN.showToast("测试输出", TestRN.SHORT)
    TestRN.showCall((name, age, isMan) => {
      console.log(name + "+" + age + "+" + isMan)
      this.setState({ two: name + "+" + age + "+" + isMan })
    })
  }

  componentWillMount() {
    this.call && this.call.remove()
  }


  render() {
    return (
      <TouchableOpacity style={styles.container} onPress={() => {
        TestRN.sendEvent()
      }}>
        <Text style={styles.welcome}>Demo测试</Text>
        <Text style={styles.instructions}>{this.state.one}</Text>
        <Text style={styles.instructions}>{this.state.two}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

TestRN.js

import { NativeModules } from "react-native";
export default NativeModules.TestMode;

ToastModule.java

package com.demo;

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

import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.LifecycleEventListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

import java.util.HashMap;
import java.util.Map;

import javax.annotation.Nonnull;

public class ToastModule extends ReactContextBaseJavaModule implements LifecycleEventListener, ActivityEventListener {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";
    private int count = 12580;

    public ToastModule(@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
        reactContext.addActivityEventListener(this);
        reactContext.addLifecycleEventListener(this);
    }

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

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void showToast(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }

    @ReactMethod
    public void showCall(Callback callback) {
        callback.invoke("hello", 123, false);
    }

    @ReactMethod
    public void sendEvent() {
        getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("event", count);
        count++;
    }


    @Override
    public void onHostResume() {

    }

    @Override
    public void onHostPause() {

    }

    @Override
    public void onHostDestroy() {

    }

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {

    }

    @Override
    public void onNewIntent(Intent intent) {

    }
}

ToastPackage.java

package com.demo;

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 ToastPackage implements ReactPackage {

    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {

        return Collections.emptyList();
    }
}

MainApplication.java

package com.demo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new ToastPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

4. Para ordenar:

• 1. clase Preparación JAVA módulo que se llama, el método invocado por la anotación exposición @ReactMethod externo.
• 2. Clase ReactPackage Escribir y añade Módulo de métodos createNativeModules clase.
• 3. () registrado en una clase por encima ReactPackage MainApplication en getPackages.
• 4. apk compilar y llamada en ReactNative en.