React Native 中如何调用 Native UI Components？

推荐答案

在 React Native 中调用 Native UI Components 可以通过以下步骤实现：

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

2. 注册 Native Module：在原生代码中注册这个模块，以便 React Native 可以访问它。

3. 创建 Native UI Component：在原生代码中创建一个自定义的 UI 组件。

4. 导出 Native UI Component：通过 Native Module 将自定义的 UI 组件导出到 React Native。

5. 在 React Native 中使用：在 React Native 的 JavaScript 代码中导入并使用这个自定义的 UI 组件。

示例代码

Android (Java)

// 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.Arrays;
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 Arrays.<ViewManager>asList(
            new MyCustomViewManager()
        );
    }
}

iOS (Objective-C)

// 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

React Native (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

在 Android 中，你需要创建一个继承自 SimpleViewManager 的类来管理自定义的 UI 组件。在 iOS 中，你需要创建一个继承自 RCTViewManager 的类。

2. 注册 Native Module

在 Android 中，你需要创建一个 ReactPackage 并将自定义的 ViewManager 注册到其中。在 iOS 中，使用 RCT_EXPORT_MODULE() 宏来导出模块。

3. 创建 Native UI Component

在 Android 中，createViewInstance 方法返回一个原生的 View 对象。在 iOS 中，view 方法返回一个原生的 UIView 对象。

4. 导出 Native UI Component

在 Android 中，通过 ReactPackage 将 ViewManager 导出。在 iOS 中，通过 RCT_EXPORT_MODULE() 宏导出。

5. 在 React Native 中使用

在 React Native 的 JavaScript 代码中，使用 requireNativeComponent 函数来导入并使用自定义的 UI 组件。

通过以上步骤，你可以在 React Native 中调用 Native UI Components，从而实现更复杂的 UI 功能。