react native native module

React Native Native Modules，官方地址：https://facebook.github.io/react-native/docs/native-modules-android.html

第一步：使用Android Studio在项目中增加两个Class

TestReactModule.java

package com.tqstablet;import android.widget.Toast;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.Manifest;
import android.app.Activity;
import android.app.AlertDialog;
import android.bluetooth.BluetoothAdapter;
import android.bluetooth.BluetoothDevice;
import android.content.Context;
import android.content.pm.PackageManager;
import android.location.LocationManager;
import android.os.Build;
import android.provider.Settings;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.BaseActivityEventListener;
import com.facebook.react.bridge.ActivityEventListener;import java.util.Map;
import java.util.HashMap;import android.os.Build;
import com.facebook.react.bridge.Callback;/*** Created by ChenWes on 2018-05-24.*/public class TestReactModule extends ReactContextBaseJavaModule {// Toast codeprivate static final String DURATION_SHORT_KEY = "SHORT";private static final String DURATION_LONG_KEY = "LONG";// image codeprivate static final int IMAGE_PICKER_REQUEST = 467081;private static final String E_ACTIVITY_DOES_NOT_EXIST = "E_ACTIVITY_DOES_NOT_EXIST";private static final String E_PICKER_CANCELLED = "E_PICKER_CANCELLED";private static final String E_FAILED_TO_SHOW_PICKER = "E_FAILED_TO_SHOW_PICKER";private static final String E_NO_IMAGE_DATA_FOUND = "E_NO_IMAGE_DATA_FOUND";private Promise mPromise;private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener() {@Overridepublic void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {// Toast.makeText(getReactApplicationContext(), "找到照片" + requestCode + "****" + resultCode, Toast.LENGTH_SHORT).show();if (requestCode == IMAGE_PICKER_REQUEST) {if (mPromise != null) {if (resultCode == Activity.RESULT_CANCELED) {// Toast.makeText(getReactApplicationContext(), "RESULT_CANCELED", Toast.LENGTH_SHORT).show();mPromise.reject(E_PICKER_CANCELLED, "Image picker was cancelled");} else if (resultCode == Activity.RESULT_OK) {// Toast.makeText(getReactApplicationContext(), "RESULT_OK", Toast.LENGTH_SHORT).show();Uri uri = intent.getData();Toast.makeText(getReactApplicationContext(), uri.toString(), Toast.LENGTH_SHORT).show();if (uri == null) {mPromise.reject(E_NO_IMAGE_DATA_FOUND, "No image data found");} else {mPromise.resolve(uri.toString());}}mPromise = null;}}}};public TestReactModule(ReactApplicationContext reactContext) {super(reactContext);// Add the listener for `onActivityResult`
        reactContext.addActivityEventListener(mActivityEventListener);}@Overridepublic String getName() {return "TestReactModule";}@Overridepublic 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;}/* 无回调的方式 *************************************************************/@ReactMethodpublic void show(String message, int duration) {Toast.makeText(getReactApplicationContext(), "Android :" + message, duration).show();}/* 事件回调的方式 *************************************************************/@ReactMethodpublic void getSystemModel(Callback result) {String sysModel = Build.MODEL;result.invoke(sysModel);}@ReactMethodpublic void getSystemModelAndVersion(Callback result) {String sysModel = Build.MODEL;String sysVersion = Build.VERSION.RELEASE;result.invoke(sysModel, sysVersion);}/* Promise的方式 *************************************************************/@ReactMethodpublic void pickImage(final Promise promise) {Activity currentActivity = getCurrentActivity();if (currentActivity == null) {promise.reject(E_ACTIVITY_DOES_NOT_EXIST, "Activity doesn't exist");return;}// Store the promise to resolve/reject when picker returns datamPromise=null;mPromise = promise;try {final Intent galleryIntent = new Intent(Intent.ACTION_PICK);galleryIntent.setType("image/*");final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");currentActivity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);Toast.makeText(getReactApplicationContext(), "弹出照片库", Toast.LENGTH_SHORT).show();} catch (Exception e) {mPromise.reject(E_FAILED_TO_SHOW_PICKER, e);mPromise = null;}}
}

TestReactModulePackage.java

package com.tqstablet;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;/*** Created by ChenWes on 2018-05-24.*/public class TestReactModulePackage implements ReactPackage {@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new TestReactModule(reactContext));return modules;}
}

第二步：在MainApplication.java中增加引用

package com.tqstablet;import android.app.Application;import com.facebook.react.ReactApplication;
import com.AlexanderZaytsev.RNI18n.RNI18nPackage;
import com.imagepicker.ImagePickerPackage;
import com.learnium.RNDeviceInfo.RNDeviceInfo;
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) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new RNI18nPackage(),new ERulerPackage(),new TestReactModulePackage(),new RNDeviceInfo(),new ImagePickerPackage());}@Overrideprotected String getJSMainModuleName() {return "index";}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic void onCreate() {super.onCreate();SoLoader.init(this, /* native exopackage */ false);}
}

第三步：在React Native中进行调用

TestModule.js

import { NativeModules } from 'react-native';
module.exports = NativeModules.TestReactModule;

调用代码

import TestReactModule from '../util/TestReactModule';

<Button style={styles.menuButton} onPress={() => {
//无回调
// TestReactModule.show("平板端打开一个对话框", TestReactModule.LONG);

//回调事件
// TestReactModule.getSystemModel((getModel) => {
// Alert.alert(getModel);
// });

//回调事件，多参数
// TestReactModule.getSystemModelAndVersion((sysModel, sysVersion) => {
// Alert.alert(sysModel, sysVersion);
// });

//Promise
TestReactModule.pickImage()
.then((data) => {
Alert.alert(data);
}).catch((err) => {
Alert.alert('Err', err.message);
})

}}>
React Native 测试
</Button>

转载于:https://www.cnblogs.com/weschen/p/9086606.html

react native native module相关推荐

[RN] React Native 错误 Module does not exist in the module map
React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...
native react ssh_React Native踩坑笔记（持续更新中...）
最近发现市场上对React Native开发人员的需求挺多的,自己就想学习一下React Native,多一门技术,好将来买个好价位.嘿嘿! 在学习React Native中碰到了不少坑,再次记录下来 ...
React调试错误'Module not found: Can't resolve'
问题 React应用调试时发现一个感觉不起眼的错误,记录于此. 我现在使用React+Semantic-UI-React调试程序,想写一个最简单的三子连线的小游戏作为试验.于是,创建一个Board组件 ...
怎么安装aptdaemon模块_自己开发一个React Native 模块
大纲为什么需要 React Native Module 如何创建一个 React Native的模块编写 Android Toast 功能模块如何调试 React Native 模块------ ...
我如何为我的第一个自由客户构建第一个React Native应用程序
by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my firs ...
React Native 启动流程源码剖析
开始之前开始分析之前,新建一个名为 RnDemo 的空项目,RN 版本选择 0.58.1,查看项目自动为我们生成 MainActivity.java 和 MainApplication.java ...
React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）
[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景有了前面<React Native Android 从学车到 ...
React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...

react native native module

react native native module相关推荐

最新文章

热门文章