上篇文章介绍react native 调用 Android原生组件 链接

1:安装环境

react native print

Node:18.9

React native :0.69.5

Expo:46.0.9

imin print 下载最新版本 https://oss-sg.imin.sg/docs/en/Printer.html

2:项目添加imin 包依赖

项目以project打开在Android studio 上面，新建libs文件夹，把最新imin 包放进去，每个文件右键添加到项目中去

image-20220918102753170.png

项目中main下面新建jniLibs把下载好的包放进去

image-20220918102941961.png

以上配置好imin print 依赖

项目用到rxandroid 需要 react-native/expo-test/expo-call-native-code/node_modules/expo/android/build.gradle 增加依赖

 // https://mvnrepository.com/artifact/io.reactivex.rxjava2/rxandroid
  implementation group: 'io.reactivex.rxjava2', name: 'rxandroid', version: '2.1.1'

3:新建IminPrintModule

public class IminPrintModule extends ReactContextBaseJavaModule {
    private IminPrintUtils mIminPrintUtils;

    public IminPrintModule(ReactApplicationContext context){
        super(context);

        if (mIminPrintUtils==null){
            mIminPrintUtils = IminPrintUtils.getInstance(context.getApplicationContext());
            mIminPrintUtils.initPrinter(IminPrintUtils.PrintConnectType.SPI);
        }
    }
    @NonNull
    @Override
    public String getName() {
        return "IminPrintModule";
    }

    @ReactMethod
    public void iminPrint(String type) {
        Log.d("iminPrint",type);
        mIminPrintUtils.printText(type);
        mIminPrintUtils.printAndFeedPaper(10);
        mIminPrintUtils.printText("--------------------------------------");

        mIminPrintUtils.printAndFeedPaper(100);
    }


    @ReactMethod
    public void iminPrintStatus(com.facebook.react.bridge.Callback callback) {

        Log.d("iminPrintStatus===","callback");
     int status = 0;
    //针对S1， //0：打印机正常 1：打印机未连接或未上电 3：打印头打开 7：纸尽  8：纸将尽  99：其它错误
      mIminPrintUtils.getPrinterStatus(IminPrintUtils.PrintConnectType.SPI, new Callback() {
            @Override
            public void callback(int status) {
                Log.d("XGH", " print SPI status:" + status +"  PrintUtils.getPrintStatus==  ");
                if (status == -1 && PrintUtils.getPrintStatus() == -1){
                    // Toast.makeText(TestPrintActivity.this, " " + status, Toast.LENGTH_SHORT).show();
                    status = PrintUtils.getPrintStatus();
                    callback.invoke(status);
                }else {

                    //Toast.makeText(TestPrintActivity.this, String.valueOf(status), Toast.LENGTH_SHORT).show();
                    status = PrintUtils.getPrintStatus();
                    callback.invoke(status);
                }

            }

        });

        Log.d("iminPrint====status",status+"");



    }
}

4:新建IminPackage class

public class IminPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new IminPrintModule(reactApplicationContext));

        return modules;
    }

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

5:向Android 注册package

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHostWrapper(
    this,
    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 that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      packages.add(new MyAppPackage());
      packages.add(new IminPackage());
      return packages;
    }

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

  private final ReactNativeHost mNewArchitectureNativeHost =
      new ReactNativeHostWrapper(this, new MainApplicationReactNativeHost(this));

  @Override
  public ReactNativeHost getReactNativeHost() {
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      return mNewArchitectureNativeHost;
    } else {
      return mReactNativeHost;
    }
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // If you opted-in for the New Architecture, we enable the TurboModule system
    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    SoLoader.init(this, /* native exopackage */ false);

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    ApplicationLifecycleDispatcher.onApplicationCreate(this);
  }

  @Override
  public void onConfigurationChanged(@NonNull Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.zcdmaple.expocallnativecode.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

6:前端代码

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View ,Button,Alert,NativeModules} from 'react-native';
const { CalendarModule,IminPrintModule } = NativeModules;


export default function App() {

  const buttonPress = () => {
    console.log("button===press");
    CalendarModule.createCalendarEvent('testName', 'testLocation');
  }

  const buttonPrint = () => {
    console.log("button===print");
    console.log("Printing......");
     let type = "test" + "\n";
    

    IminPrintModule.iminPrint(
      type
    );

  }


   

  const testCallBack = () => {
    console.log("testCallBack====");
    CalendarModule.testCallBack("fdf","test",(result) => {
      console.log("CalendarModule.test================================",result);
    })
  }

  const iminPrintStatus = () => {
    console.log("iminPrintStatus====");
    IminPrintModule.iminPrintStatus((resultSatus) => {
      console.log("resultSatus======",resultSatus)
    })

  }
  return (
    <View style={styles.container}>
      <Text>react native call native method</Text>
      <Button
        title="Press me"
        onPress={() => buttonPress()}
      />

    <Button
        title="print"
        onPress={() => buttonPrint()}
      />

    


    <Button
        title="testCallBack"
        onPress={() => testCallBack()}
      />

      <Button
        title="iminPrintStatus"
        onPress={() => iminPrintStatus()}
      />    
      <StatusBar style="auto" />
    </View>

    
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

代码链接