React Native/Flutter 原生模块开发

以下是关于 React Native 和 Flutter 原生模块开发的基本知识点总结：

一、核心概念对比

二、React Native 原生模块开发

1. 基础模块架构

2. Android 原生模块开发

// MyModule.java
public class MyModule extends ReactContextBaseJavaModule {
            
  public MyModule(ReactApplicationContext context) {
            
    super(context);
  }

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

  @ReactMethod
  public void showToast(String message) {
            
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
  }
}

// MyPackage.java
public class MyPackage implements ReactPackage {
            
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext context) {
            
    return Arrays.<NativeModule>asList(new MyModule(context));
  }
}

3. iOS 原生模块开发

// MyModule.swift
@objc(MyModule)
class MyModule: NSObject {
            
  @objc static func requiresMainQueueSetup() -> Bool {
             return true }

  @objc func showToast(_ message: String) {
            
    DispatchQueue.main.async {
            
      let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
      UIApplication.shared.keyWindow?.rootViewController?.present(alert, animated: true)
    }
  }
}

4. JS端调用

import {
             NativeModules } from 'react-native';
NativeModules.MyModule.showToast('Hello Native!');

三、Flutter 原生模块开发

1. Platform Channel 架构

2. Android 平台实现

// MainActivity.kt
class MainActivity : FlutterActivity() {
            
  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
            
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "my_channel").setMethodCallHandler {
             call, result ->
      when (call.method) {
            
        "showToast" -> {
            
          Toast.makeText(this, call.arguments.toString(), Toast.LENGTH_LONG).show()
          result.success(null)
        }
        else -> result.notImplemented()
      }
    }
  }
}

3. iOS 平台实现

// AppDelegate.swift
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
            
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
            
    let controller = window?.rootViewController as! FlutterViewController
    let channel = FlutterMethodChannel(name: "my_channel", binaryMessenger: controller.binaryMessenger)
    channel.setMethodCallHandler {
             call, result in
      if call.method == "showToast" {
            
        let alert = UIAlertController(title: nil, message: call.arguments as? String, preferredStyle: .alert)
        controller.present(alert, animated: true)
        result(nil)
      } else {
            
        result(FlutterMethodNotImplemented)
      }
    }
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

4. Dart端调用

import 'package:flutter/services.dart';

final _channel = MethodChannel('my_channel');
Future<void> showToast(String message) async {
            
  try {
            
    await _channel.invokeMethod('showToast', message);
  } on PlatformException catch (e) {
            
    print("Native调用失败: ${e.message}");
  }
}

四、高级开发技巧

1. 性能优化策略

2. 混合视图集成

React Native：

// iOS原生视图封装
class CustomView: UIView {
            
  // 实现RCTComponent协议
}

// JS端使用
<NativeCustomView style={
            styles.custom} /> 

Flutter：

// PlatformView集成Android View
Widget build(BuildContext context) {
            
  return AndroidView(
    viewType: 'plugins.example/native_view',
    creationParams: {
            'text': 'Hello'},
    creationParamsCodec: StandardMessageCodec(),
  );
}

3. 异步通信模式

React Native Promise示例：

@ReactMethod
public void asyncTask(Promise promise) {
            
  new Thread(() -> {
            
    try {
            
      String result = doHeavyWork();
      promise.resolve(result);
    } catch (Exception e) {
            
      promise.reject("ERROR", e);
    }
  }).start();
}

Flutter Completer示例：

Future<String> fetchData() async {
            
  final completer = Completer<String>();
  _channel.invokeMethod('fetch').then((result) {
            
    completer.complete(result);
  }).catchError((error) {
            
    completer.completeError(error);
  });
  return completer.future;
}

五、企业级应用方案

1. 架构设计模式

2. 质量保障体系

六、调试与优化

1. 调试工具链

2. 常见问题解决

七、前沿技术演进

八、学习路径建议