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 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JS的反射问题
Apr 07 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 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调用新浪短链接API的方法
2014/11/08 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
使用numba对Python运算加速的方法
2018/10/15 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
解决Mac下使用python的坑
2019/08/13 Python
python实现视频读取和转化图片
2019/12/10 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
给导游的表扬信
2014/01/10 职场文书
高中数学教学反思
2014/01/30 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
个性婚礼策划方案
2014/05/17 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
中学生运动会广播稿
2015/08/19 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书