Question

我是React Native开发的新手，我正在创建一个应用程序，该应用程序使用由我创建的android native库，包括它作为.aar文件。

我已经按照https://facebook.github.io/react-native/docs/native-modules-android中所述创建了本机模块，并将其与npm install一起安装。在我还使用npm link链接了本机模块并最终使用命令

生成了android js捆绑包之后

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

当我运行react-native run-android命令时，出现此错误：

应用程序注册表不是已注册的可调用模块（调用runApplication）（请参见链接的图片）

React native error

我在节点10.15.3上使用本地版本0.89.8。

以下是本机模块桥接Java代码：

模块类

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

import android.Manifest;
import android.content.Context;
import android.content.pm.PackageManager;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
// more imports...

public class RNMyBridgeModule extends ReactContextBaseJavaModule {

  boolean hasReadPhoneStatePermission = false;
  private static final int APP_PERMISSIONS_READ_PHONE_STATE = 196;

  private final ReactApplicationContext reactContext;

  public RNApbBridgeModule(ReactApplicationContext reactContext) {
    super(reactContext);
    this.reactContext = reactContext;
  }

  @Override
  public String getName() {
    return "RNMyBridge";
  }

      @ReactMethod
      public void send(String appName) {

          Context ctx = getReactApplicationContext();
          hasReadPhoneStatePermission = //... boilerplate code for phone state permission
          MyModule mm = new MyModule(getReactApplicationContext(), hasReadPhoneStatePermission);
          mm.doStuff(appName, null);
      }
}

包装类

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

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class RNMyModulePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(new RNMyBridgeModule(reactContext));
    }

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

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

主类

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.mypackage.RNMyModulePackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

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

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 RNMyModulePackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

活动课程

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 "MyAppName";
    }
}

js索引文件（index.js）

// this is added to npm locally with this name, using npm install and it's properly installed
import MyModule from 'rn-mymodule-bridge';
module.exports = MyModule;

index.android.js（在其中称为模块）

import React from 'react';
import { Alert, Button, Image, StyleSheet, Text, TextInput, View } from 'react-native';


export default class MyApp extends React.Component {


    _onPressButton() {
        Alert.alert('You tapped the button!');
        MyModule.send("MyApp");
    }

    render() {
        return (
            <View style={styles.container}>

                {/* Header and top button */}
                <Text style={styles.header}>My Module Calls</Text>
                <View style={{margin:10}}>
                    <Button onPress={this._onPressButton}
                            type="clear"
                            color="orange"
                            title="Do something now!"
                            accessibilityLabel="Press this button to do something!"/>
                </View>


                {/* more view components... */} 
                {/* Close Container View */}

                <Text style={styles.title}></Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgba(220,230,218,1)',
        flex:1,
    },

    header: {
        alignItems: 'flex-start',
        backgroundColor: 'green',
        color: 'white',
        fontSize: 24,
        textAlign: 'center',
        marginTop: 24,
        maxHeight: 40,
        flex:1,
    },

    title: {
        alignItems: 'flex-start',
        backgroundColor: 'rgba(0,0,0,1)',
        color: '#fff',
        fontSize: 20,
        textAlign: 'center',
        maxHeight: 40,
        flex:1,
    },

    button: {
        borderRadius: 5,
        fontSize: 30,
        margin: 50,
        padding: 10,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 20,
        marginBottom: 20,
        textAlign: 'center',
        flex:1,
    },

    textInput: {
        padding: 10,
        fontSize: 24,
    }


});
AppRegistry.registerComponent('MyApp', () => MyApp);

我怀疑该问题与我的自定义模块加载和查找有关，但是我不知道具体的错误和修复可能是什么。

我已经阅读了关于SO的所有其他相关问题，但它们似乎都与不同的事物有关，好像此错误是隐藏真正问题的非常普通的事物。

任何帮助将不胜感激。

React-Native App：如何修复AppRegistry不是已注册的模块（调用runApplication）

0 个答案: