React Native实现js调用安卓原生代码
1 问题
实现js调用安卓原始代码,直接上代码,简单粗暴
2 代码实现
1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下
public class MyToastModule extends ReactContextBaseJavaModule {public MyToastModule(ReactApplicationContext reactContext) {super(reactContext);}/*** getName方法返回一个字符串名字,就是js中的模块名* 到时候我们写js的时候需要导入这个模块,这里我用的是MyToast*/@Overridepublic String getName() {return "MyToast";}/*** 这是js调用的方法,需要使用注解@ReactMethod,返回类型必须为void*/@ReactMethodpublic void show() {Toast.makeText(getReactApplicationContext(), "I am chenyu", Toast.LENGTH_SHORT).show();}
}
getName()方法返回一个字符串名字,就是js中的模块名,到时候我们写js的时候需要导入这个模块,这里我用的是MyToastshow()方法 show()方法是到时候js调用的方法,需要使用注解@ReactMethod,返回类型必须为void
2) 实现继承ReactPackage的一个类
MyToastReactPackage.java 文件如下
package com.pro_react;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;/*** */public class MyToastReactPackage implements ReactPackage {/*** 需要在应用的Package类的createNativeModules方法中添加这个模块。* 如果模块没有被注册,它也无法在JavaScript中被访问到。* @param reactContext* @return*/@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new MyToastModule(reactContext));return modules;}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}
}
这里的createNativeModules方法需要添加我之前写的MyToastModule模块
3 ) 在MainApplication.java文加的getPackages方法中添加我自己的包,代码如下
package com.pro_react;import android.app.AppOpsManager;
import android.app.Application;
import android.content.Context;
import android.content.Intent;
import android.content.pm.ApplicationInfo;
import android.net.Uri;
import android.os.Build;
import android.util.Log;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.lang.reflect.Field;
import java.lang.reflect.Method;
import java.util.Arrays;
import java.util.List;public class MainApplication extends Application implements ReactApplication {public static final String TAG = "MainApplication";private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {Log.i(TAG, "MainApplication getPackages");return Arrays.<ReactPackage>asList(new MainReactPackage(),new MyToastReactPackage());}@Overrideprotected String getJSMainModuleName() {return "index";}};@Overridepublic ReactNativeHost getReactNativeHost() {return mReactNativeHost;}@Overridepublic void onCreate() {super.onCreate();Log.i(TAG, "MainApplication onCreate");SoLoader.init(this, /* native exopackage */ false);}
}
4) js模块的编写
js模块要注意你需要加入这个
import {NativeModules} from 'react-native'
然后用变量保存安卓的模块,也就是上面getName方法里面的返回值MyToast
var myAndroidToast = NativeModules.MyToast;
然后我是模拟,文本点击触发的调用原声安卓的函数,App.js文件如下
/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NativeModules} from 'react-native';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',
});
var myAndroidToast = NativeModules.MyToast;
type Props = {};
export default class App extends Component<Props> {render() {return (<View style={styles.container}><Text onPress={()=> this._androidShowMsg()} style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.instructions}>To get started, edit App.js</Text><Text style={styles.instructions}>{instructions}</Text></View>);}/***调用安卓原生代码 * @private*/_androidShowMsg = () => {myAndroidToast.show();}; }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,},
});
3 运行结果
运行之前要记得在项目的目录下执行下面的命令,它会在android的assets目录下生成index.android.bundle文件,也就是安卓会加载这个js文件,这里也会起到编译js作用,如果有语法错误,这里控制台会提示
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
然后执行运行项目命令
react-native run-android
点击Welcome to React Native运行结果如下
React Native实现js调用安卓原生代码相关推荐
- React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题 上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
- h5调用安卓原生相机、相册、电话、录像,且兼容安卓系统8.0
前言 安卓原生组件webview加载h5的URL,若要h5调用安卓原生相机和相册有效需要做以下操作. 测试机:魅蓝note2 系统5.1.1 华为荣耀畅玩7x 系统8.0.0 一.h5页面相关 方 ...
- React Native调用Android原生代码实现车牌识别功能【附效果图附源码】
转载请注明出处,原文地址:http://blog.csdn.net/lucherr/article/details/71908180 这段时间研究了下React Native,Facebook推出的, ...
- Facebook 开源安卓版 React Native,开发者可将相同代码用于网页和 iOS 应用开发
转自:http://mt.sohu.com/20150915/n421177212.shtml Facebook 创建了React Java 库,这样,Facebook 的工程团队就可以用相同的代码给 ...
- React Native系列(6) - 编译安卓私有React-Native代码
为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...
- react native 处理iOS和安卓系统文字
非常简单的几步 让 react native app不随系统文字变化的处理 ios 处理方法如下 : 新增addCustomProps.js (位置随意放到项目目录, 只要路径引用的到) 下面是 ad ...
- React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
- Qt on Android 调用安卓原生方法
标题c++与java混合编程 1.先用安卓编译器编译一次,在android-build目录下找到AndroidManifest.xml. 2.在项目路径下创建 android/src/ 目录 3.将A ...
- JS调用安卓手机摄像头扫描二维码并用JS解析二维码
项目要求: 使用H5模仿微信扫一扫付款功能 经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容 ...
最新文章
- javascript中关于this指向问题详解
- 10行Python代码自动清理电脑内重复文件,释放双手!
- 开发提交审核流程_小游戏上线发布全流程详解?
- hadoop安装详细步骤_推荐一个超详细的Hadoop安装教程,已有32万次阅读
- mock 生成在线图片
- 使用Numpy和Opencv完成图像的基本数据分析(Part III)
- Android NDK开发篇(四):Java与原生代码通信(原生方法声明与定义与数据类型)
- Bootstrap3 Font Awesome 字体图标的堆叠
- 你不可能没看过这10个设计师的文章
- java上传图片到oracle_JavaWeb项目 js图片上传到Oracle转为base64存入数据库
- vscode-扩展插件
- AutoCAD2013 以上利用AccoreConsole+ c# NetApi 批量处理图纸
- Linux unison 效率,linux inotify+unison双向同步环境部署
- Gentoo Linux+KDE Plasma桌面安装教程
- 几时几分几秒怎么写_几分几秒怎么写
- 51单片机控制动态数码管的显示
- 分析:大数据失败案例及背后原因!
- Matlab一个错误引发的血案:??? Error using == str2num Requires string or character array input....
- MySQL中DELETE操作磁盘空间不会减少的原因
- 计算机图形学课程设计html源码,孔令德的计算机图形学实验及课程设计(VC++版)...