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.