react-native - 无法从自定义 NativeModules 导入模块

Question

我一直在尝试在 react-naitce 中以编程方式发送 SMS，所以我创建了 2 个 react-native 模块，并将它们链接到 MainAplication.java

DirectSMSModule.java

package com.myapp;

import android.telephony.SmsManager;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;

public class DirectSmsModule extends ReactContextBaseJavaModule {

    public DirectSmsModule(ReactApplicationContext reactContext) {
        super(reactContext); //required by React Native
    }

    @Override
    //getName is required to define the name of the module represented in JavaScript
    public String getName() {
        return "DirectSms";
    }

    @ReactMethod
    public void sendDirectSms(String phoneNumber, String msg) {
        try {
            SmsManager smsManager = SmsManager.getDefault();
            smsManager.sendTextMessage(phoneNumber, null, msg, null, null);
        } catch (Exception ex) {
            System.out.println("couldn't send message.");
        }
    }
}

然后我将 DirectSMSModule.java 导入 DirectSmsPackage.java

package com.myapp;

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.myapp.DirectSmsModule;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class DirectSmsPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //this is where you register the module
        modules.add(new DirectSmsModule(reactContext));
        return modules;
    }
}

至少我链接了 MainAplication.java 中的所有内容

package com.myapp;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
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() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new DirectSmsPackage());
         
          return packages;
        }

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

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

然后在我的 Index.js 中，我尝试导入 NativeModules，并且我还创建了在后台发送短信的函数，但我有错误找不到变量 sendDirectSms，我的 linter 也显示未解析的变量 DirectSms 和未解析的函数或方法 sendDirectSms ()

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import {Text, TouchableOpacity, StyleSheet, PermissionsAndroid, NativeModules} from 'react-native';



const DirectSms = NativeModules.DirectSms


const App = (props) => {




    (async () => {
       sendDirectSms();
        try {
          const granted = await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.SEND_SMS,
              {
                title: 'YourProject App Sms Permission',
                message:
                    'YourProject App needs access to your inbox ' +
                    'so you can send messages in background.',
                buttonNeutral: 'Ask Me Later',
                buttonNegative: 'Cancel',
                buttonPositive: 'OK',
              },
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            DirectSms.sendDirectSms('0935...', 'This is a direct message');
          } else {
            console.log('SMS permission denied');
          }
        } catch (err) {
          console.warn(err);
        }
    })();



  return (
    <>
      <TouchableOpacity style={styles.button}>
        <Text style={{color: 'white', textAlign: 'center'}}>SAVE</Text>
      </TouchableOpacity>
    </>
  );
};



export default App;

标签： react-nativereact-native-android