ReactNative封装Android原生UI

在React Native中封装Android原生UI组件，你需要遵循以下步骤：

1. 创建一个自定义组件类，继承自ReactContextBaseJavaModule。
2. 实现getName方法，返回组件的名称供React Native使用。
3. 注册模块，在MainApplication.java或你的自定义ReactPackage中注册你的模块。
4. 使用ReactMethod注解你想暴露给JavaScript的方法。
5. 确保你的项目已正确配置并且所有的依赖项都已安装。

以下是一个简单的示例，展示如何封装一个显示一条Toast消息的Android原生组件：

package com.yourpackage;
 
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.module.annotations.ReactModule;
 
@ReactModule(name = "ToastAndroid")
public class ToastAndroidModule extends ReactContextBaseJavaModule {
 
    ToastAndroidModule(ReactApplicationContext context) {
        super(context);
    }
 
    @Override
    public String getName() {
        return "ToastAndroid";
    }
 
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

然后，在MainApplication.java中注册模块：

import com.yourpackage.ToastAndroidModule;
 
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 ReactPackage() {
            @Override
            public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
              return Arrays.<NativeModule>asList(new ToastAndroidModule(reactContext));
            }
 
            @Override
            public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
              return Collections.emptyList();
            }
          }
      );
    }
  };
 
  // ...
}

最后，在React Native中使用封装的组件：

import React from 'react';
import { Button, Text, View } from 'react-native';
import { requireNativeComponent } from 'react-native';
 
export default class MyComponent extends React.Component {
  showToast = () => {
    ToastAndroid.show('Hello, Android!', ToastAndroid.SHORT);
  };
 
  render() {
    return (
      <View>
        <Button