ReactNative-JS 调用原生方法实例代码


Posted in Javascript onOctober 08, 2016

ReactNative-JS 调用原生方法实例代码

第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule

package com.mixture;

import android.content.Context;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * Created by Administrator on 2016/9/22.
 */

public class MyNativeModule extends ReactContextBaseJavaModule {

  public static final String REACTCLASSNAME = "MyNativeModule";
  private Context mContext;

  public MyNativeModule(ReactApplicationContext reactContext) {
    super(reactContext);
    mContext = reactContext;
  }

  @Override
  public String getName() {
    return REACTCLASSNAME;
  }

  /**
   * 必须添加反射注解不然会报错
   * 这个方法就是ReactNative将要调用的方法,会通过此类名字调用
   * @param msg
   */
  @ReactMethod
  public void callNativeMethod(String msg) {
    Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
  }
}

第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中

package com.mixture;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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 Administrator on 2016/9/22.
 */

public class MyReactPackage implements ReactPackage {

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

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

第三步在应用入口注册这个React包管理器

package com.mixture;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

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

public class MainApplication extends Application implements ReactApplication {

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

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          //在应用中注册这个包管理器
          new MyReactPackage()
      );
    }
  };

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

第四步就是在ReactNative中调用react-native中提供一个NativeModules通过模块名字和方法名字进行调用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NativeModules,
} from 'react-native';

class Mixture extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions} onPress={() => this.onClick()}>
          调用用原生方法
        </Text>
      </View>
    );
  }

  /**
   * 调用原生方法
   */
  onClick() {
    NativeModules.MyNativeModule.callNativeMethod('成功调用原生方法');
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Mixture', () => Mixture);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js的toUpperCase方法用法实例
Jan 27 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
微信小程序 实战小程序实例
Oct 08 #Javascript
node.js实现博客小爬虫的实例代码
Oct 08 #Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 #Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 #Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 #Javascript
微信小程序 canvas API详解及实例代码
Oct 08 #Javascript
微信小程序 animation API详解及实例代码
Oct 08 #Javascript
You might like
利用PHP实现短域名互转
2013/07/05 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript中的闭包
2016/02/24 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python中List.index()方法的使用教程
2015/05/20 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
django在开发中取消外键约束的实现
2020/05/20 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
公司担保书范文
2014/05/21 职场文书
2014教师年度工作总结
2014/11/10 职场文书
先进基层党组织材料
2014/12/25 职场文书
捐资助学感谢信
2015/01/21 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
公司出差管理制度范本
2015/08/05 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android