React Native 中如何编写 Native UI Components？

推荐答案

在 React Native 中编写 Native UI Components 通常涉及以下步骤：

1. 创建 Native Module：首先，你需要创建一个 Native Module，这个模块将作为 JavaScript 和原生代码之间的桥梁。

2. 实现原生代码：在 Android 上，你需要使用 Java 或 Kotlin 编写原生代码；在 iOS 上，你需要使用 Objective-C 或 Swift 编写原生代码。

3. 注册 Native Module：在 Android 上，你需要在 MainApplication.java 或 MainApplication.kt 中注册你的 Native Module；在 iOS 上，你需要在 AppDelegate.m 或 AppDelegate.swift 中注册。

4. 在 JavaScript 中使用：最后，你可以在 JavaScript 中导入并使用这个 Native Module。

Android 示例

// www.javascriptcn.com code example
// MyCustomViewManager.java
package com.myapp;

import android.view.View;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

public class MyCustomViewManager extends SimpleViewManager<View> {
    @Override
    public String getName() {
        return "MyCustomView";
    }

    @Override
    protected View createViewInstance(ThemedReactContext reactContext) {
        return new View(reactContext);
    }
}

// www.javascriptcn.com code example
// MyCustomViewPackage.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 java.util.Collections;
import java.util.List;

public class MyCustomViewPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

// www.javascriptcn.com code example
// MainApplication.java
package com.myapp;

import android.app.Application;
import com.facebook.react.ReactApplication;
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 MyCustomViewPackage()
            );
        }
    };

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

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

iOS 示例

// www.javascriptcn.com code example
// MyCustomViewManager.m
#import <React/RCTViewManager.h>

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

RCT_EXPORT_MODULE()

- (UIView *)view {
    return [[UIView alloc] init];
}

@end

// www.javascriptcn.com code example
// AppDelegate.m
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

RCT_EXPORT_MODULE()

- (UIView *)view {
    return [[UIView alloc] init];
}

@end

JavaScript 使用

// www.javascriptcn.com code example
import { requireNativeComponent } from 'react-native';

const MyCustomView = requireNativeComponent('MyCustomView');

const App = () => {
  return <MyCustomView style={{ width: 100, height: 100, backgroundColor: 'red' }} />;
};

export default App;

本题详细解读

1. 创建 Native Module

在 React Native 中，Native Module 是 JavaScript 和原生代码之间的桥梁。你可以通过创建 Native Module 来暴露原生功能给 JavaScript 使用。

2. 实现原生代码

在 Android 上，你需要继承 SimpleViewManager 或 ViewManager 来创建自定义视图管理器。在 iOS 上，你需要继承 RCTViewManager 来实现类似的功能。

3. 注册 Native Module

在 Android 上，你需要在 MainApplication.java 或 MainApplication.kt 中注册你的 Native Module。在 iOS 上，你需要在 AppDelegate.m 或 AppDelegate.swift 中注册。

4. 在 JavaScript 中使用

最后，你可以在 JavaScript 中使用 requireNativeComponent 来导入并使用这个 Native Module。这样，你就可以在 React Native 应用中使用自定义的原生 UI 组件了。

通过以上步骤，你可以在 React Native 中编写和使用 Native UI Components，从而扩展 React Native 的功能，满足特定的业务需求。