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;

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);

原文地址:https://www.cnblogs.com/candyzhmm/p/8975015.html

时间: 2024-11-12 13:32:07

ReactNative-JS 调用原生方法实例代码(转载)的相关文章

js 调用原生方法

前端调用 原生app 方法,通过 iframe 唤起 native if( navigator.userAgent.indexOf('iPhone') >= 0 ) { var ifr = document.createElement('ifrmae'); ifr.src = 'xx://postToken'; ifr.style.display = 'none'; document.body.appendChild(ifr); } // 执行完成后的回调 function sendTokenT

react-native 调用原生方法

基于RN0.40. MyNativeModule.java package com.www; //路径名字 import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.faceb

UIWebView中Html中用JS调用OC方法及OC执行JS代码

1.HTML页面 1 <html> 2 3 <head> 4 5 <title>HTML中用JS调用OC方法</title> 6 7 <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> 8 9 <script> 10 11 function test() 12 13 { 14 15 alert("test

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

js网址跳转实例代码

js网址跳转实例代码:网址跳转是常用的功能,比如点击一个按钮实现跳转,或者说希望一条新闻打开后可以跳转到其他页面,就可以直接在编辑器中输入跳转代码.下面就简单列举一下js跳转代码,可以根据实际情况选择使用.方式一: window.location.href="http://www.softwhy.com"; 以上代码可以跳转到指定的链接.方式二: window.history.back(-1); 以上代码可以返回之前访问的页面.方式三: self.location="http

js淡入淡出效果实例代码

js淡入淡出效果实例代码:现在的网页要求美观平滑,所以很多让元素消失的效果也也需要有一个过渡过程,这样看起来更为平缓美观,本章节提供了一个代码实例,可以轻松的实现让元素淡入淡出效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com

Unity,WebGL, 页面JS调用Unity方法

与WebPlayer类似,在JS中用SendMessage 比如在Unity场景中有一个GameObject,叫A,A上有C#脚本,里面有个方法 public void F(string str) { //do something... } 在发布出的WebGL项目index.html中用JS调用此方法 <script> var gameInstance = UnityLoader.Instantiate("gameContainer", "Build/WebAn

JS调用App方法及App调用JS方法

做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话,那么就需要考虑以下一些问题了. 1. 方法命名规范. 如果考虑到以后会有大量的方法,那么规范化的命名就很重要了,规范化的命名,既保证了名字的唯一性又保证了代码的可读性方便开发过程,也方便后期维护.   举个栗子,  如果现在有一个方法,是关闭webview, js调用app的方法, 如果直接叫cl

Android - Android调用JNI方法 及 代码

Android调用JNI方法 及 代码 本文地址: http://blog.csdn.net/caroline_wendy JNI: Java Native Interface, 实现Java和C/C++的互通. 在Android上使用JNI的方法. 时间:2014.9.3 环境: 必须使用标准Eclipse, 安装Android的环境, 才可以使用NDT插件. Eclipse Standard/SDK Version: Luna Release (4.4.0); Android: ADT-23