react native mqtt android native部分编译不到的问题.

Question

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

我在使用这个mqtt模块的时候: https://github.com/tuanpmt/re... , 遇到了
调用不到的问题. 加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中的原生模块?

Answer 1

自问自答了吧, 最后从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的两句是我加的. 目前已经编译通过, 可以连接上服务器. ^_^

Answer 2

你好，我也在研究react native 的mqtt。看到你已经解决了，想和你交流一下。我的qq是984971259.

Answer 3

问下 你在配置ios没有问题吗 我安卓上是没有问题的 但到了ios上就不行了 NativeModules里面没有mqtt这部分的方法