alternativement ReactNative natif Android

Dans le développement, nous rencontrons souvent des scénarios ont besoin et l'interaction native, ReactNative nous a donné une interface dépendante prédéfinie, utilisez simplement.

1. un Initialiser projet vide, à titre d'exemple:

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

2. Ecrire le code Java dans Android Studio:

ToastModule nouvelles hérite de la classe ReactContextBaseJavaModule, parent et méthodes abstraites, dans lequel retour de la méthode getName () la valeur actuelle, qui est le nom du module.

#### appel ReactNative: NativeModules.TestMode

public class ToastModule extends ReactContextBaseJavaModule{


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

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

Réécriture carte publique méthode <String, Object> getConstants () pour fournir une utilisation variable de ReactNative.

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

Fournir une méthode pour ReactNative, vous devez ajouter un commentaire @ReactMethod.

#### appel ReactNative: NativeModules.TestMode.showToast ( "sortie de test", NativeModules.TestMode.SHORT)

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

Fournir une méthode de rappel pour une utilisation ReactNative, vous devez ajouter un commentaire @ReactMethod, utilisez la fonction de rappel Callback ReactNative fourni.

#### ReactNative 调用: NativeModules.TestMode.showCall ((nom, âge, Isman) => {console.log (nom + « + » + âge + « + » + Isman)})

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

Envoyer des événements à fournir une méthode pour ReactNative, vous devez ajouter un commentaire @ReactMethod.

#### appel ReactNative: this.call = DeviceEventEmitter.addListener ( 'événement', (données) => {console.log ( "le message:", données)});

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

Moniteur d'activité du cycle de vie du module, la nécessité de réaliser une interface LifecycleEventListener.

    reactContext.addActivityEventListener(this);

    @Override
    public void onHostResume() {

    }

    @Override
    public void onHostPause() {

    }

    @Override
    public void onHostDestroy() {

    }

Les modules d'écoute onActivityResult, la nécessité de réaliser une interface ActivityEventListener.

    reactContext.addLifecycleEventListener(this);

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

    }

    @Override
    public void onNewIntent(Intent intent) {

    }

3. Remplir le code:

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. Ordre de tri:

• 1. Préparation JAVA Module de classe à appeler, la méthode invoquée par l'annotation exposition de @ReactMethod externe.
• 2. classe Write ReactPackage et ajoute le module dans les méthodes de la classe de createNativeModules.
• 3. () enregistré dans une classe au-dessus ReactPackage MainApplication dans GetPackages.
• 4. Compile apk, et faire appel à ReactNative en.