React Native：Native UI 组件(Android)

在 React Native 中使用 Android 的原生 UI 组件也是可行的。以下是一个简单的例子，演示如何在 React Native 项目中集成一个自定义的 Android 原生 UI 组件。

1. 创建 Native UI 组件:

在你的 Android 项目中创建一个原生组件，例如 MyCustomView。

   // MyCustomView.java
   package com.yourapp;

   import android.content.Context;
   import android.widget.TextView;

   public class MyCustomView extends TextView {

       public MyCustomView(Context context) {
           super(context);
           // Initialize your native view here
       }
   }

2. 创建 ViewManager:

创建一个 ViewManager 类，用于管理你的原生视图。

   // MyCustomViewManager.java
   package com.yourapp;

   import com.facebook.react.uimanager.SimpleViewManager;
   import com.facebook.react.uimanager.ThemedReactContext;

   public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {

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

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

3. 注册 Native 组件:

在你的 MainApplication.java 中注册该组件。

   // MainApplication.java
   package com.yourapp;

   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()
                   );
               }
           };

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

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

4. 创建 JavaScript 封装:

在你的 React Native 项目中，创建一个 JavaScript 文件，使用 requireNativeComponent 引入该原生组件。

   // MyCustomView.js
   import React from 'react';
   import { requireNativeComponent } from 'react-native';

   const MyCustomView = requireNativeComponent('MyCustomView', null);

   export default MyCustomView;

5. 在 React Native 项目中使用:

   import React from 'react';
   import { View } from 'react-native';
   import MyCustomView from './MyCustomView';

   const App = () => {
       return (
           <View>
               <MyCustomView style={{ width: 200, height: 100 }} />
           </View>
       );
   };

   export default App;

在这个例子中，MyCustomView 是一个简单的 Android 原生 UI 组件，可以在 React Native 项目中使用。你可以根据需要在原生组件中添加自定义的 UI 元素和功能。在 React Native 中，使用 SimpleViewManager 来创建 ViewManager，并在 createViewInstance 方法中初始化原生组件。

确保在 Android 项目中进行构建并重新启动 React Native 应用程序。这样，你就可以在 React Native 中使用自定义的 Android 原生 UI 组件了。

转载请注明出处：http://www.zyzy.cn/article/detail/9453/React Native