react native调用带java的第三方模块(mqtt)如何编译



  • 现在遇到一个问题, 就是引用android 的java模块的时候, 不知道如何加入到工程中.
    具体如下:

    我在使用这个mqtt模块的时候: https://github.com/tuanpmt/react-native-mqtt , 遇到了
    调用不到的问题. 加log跟踪到到它的index.js的时候, 发现如下这段代码中:

    import {
    DeviceEventEmitter,
    NativeModules
    } from 'react-native';

    var Mqtt = NativeModules.Mqtt;

    其中Mqtt值为空, 也就是NativeModules中没有将其加入进来.

    按照模块的官方说明, 有如下介绍:

    Modify the ReactInstanceManager.builder() calls chain in android/app/main/java/.../MainActivity.java to include:
    
    import com.tuanpm.RCTMqtt.*; // import
    
    .addPackage(new RCTMqttPackage()) //for older version
    
    new RCTMqttPackage()           // for newest version of react-native
    

    在网上查的关于引用android java模块的教程也是基本上说往MainActivity中加,
    但是我在我的工程的 MainActivity.java(该文件由react native创建工程时自动生成的)
    中, 根本就没有相关的上下文, 我的MainActivity很简单, 就如下几句话:

    package com.autohome;
    
    import com.facebook.react.ReactActivity;
    
    public class MainActivity extends ReactActivity {
    
        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "AutoHome";
        }
    }
    

    我在我工程的全部文件中搜索ReactInstanceManager.builder的调用, 就如下几个文件:

    ./node_modules/react-native/local-cli/link/__fixtures__/android/0.17/patchedMainActivity.java:25:        mReactInstanceManager = ReactInstanceManager.builder()
    ./node_modules/react-native/local-cli/link/__fixtures__/android/0.17/MainActivity.java:24:        mReactInstanceManager = ReactInstanceManager.builder()
    ./node_modules/react-native/ReactAndroid/src/androidTest/java/com/facebook/react/testing/ReactTestHelper.java:112:      return ReactInstanceManager.builder();
    ./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java:66:    ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
    ./node_modules/react-native-mqtt/README.md:31:-   Modify the ReactInstanceManager.builder() calls chain in `android/app/main/java/.../MainActivity.java` to include:
    

    这几个文件中倒是有带相关上下文的, 但是我加了之后发现都不管用, 后来发现这几个文
    件不会被编译.

    之后又尝试把这几个文件中的上下文拷贝到我自己的工程的MainActivity中:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
    
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new RCTMqttPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
    
        mReactRootView.startReactApplication(mReactInstanceManager, "Basic", null);
    
        setContentView(mReactRootView);
    }
    

    但是拷贝后编译不过, 如下:

    android/app/src/main/java/com/autohome/MainActivity.java:7: 错误: 找不到符号import com.facebook.react.LifecycleState;
    

    上面的已经import但是仍然找不到.

    所以想问一下, react native中应该如何调用android中的原生模块?



  • 自问自答了吧, 最后从react native官方文档中找到了答案, 原来我这种情况下, 是要加到自己工程的android/app/src/main/java/com/autohome/MainApplication.java中, 具体如下:
    ...
    import com.tuanpm.RCTMqtt.*;

    public class MainApplication extends Application implements ReactApplication {
    
      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }
    
        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new RCTMqttPackage()
          );
        }
      };
    ...
    

    其中带mqtt的两句是我加的. 目前已经编译通过, 可以连接上服务器. ^_^


登录后回复