Android项目集成RN系列：RN使用Android原生控件或

【简述RN集成到Android原生项目】
【Android项目集成RN系列：修改端口号 / 离线包 / 消息通信】

其实RN中已存在部分控件到原生控件的映射，在RN中可以直接使用，可是毕竟RN提供的组件有限，我们平时原生开发中还进行自定义控件/组件呢，所以这里就讲到了RN如何去使用我们原生的自定义控件/组件。

下面以开发中碰到的事例简单介绍一下：
RN开发中同样的代码在Android与IOS上会有不同的现象，部分布局在iOS上显示没有问题，但是在android环境下运行会出现被剪裁的现象，现象如下左图显示，看到这我们Android开发应该想到问题的原因是因为子布局被父布局给剪裁了，那么又如何解决呢？有问题找开发者文档啊，ViewGroup Android documentation (https://developer.android.com/reference/android/view/ViewGroup.html#setClipChildren(boolean))，我们把这个属性设置一下setClipChildren(false)发现可以解决问题，可是我们总不能每个View都这么设置吧，那我们就要自定义控件了，在RN中使用我们的自定义控件了，主题来了哈，具体操作如下：

image.png

1. 在Android项目中创建容器RNViewGroupLayout

   public class RNViewGroupLayout extends ReactViewGroup {
       public RNViewGroupLayout(Context context) {
           super(context);
       }
   
       @Override
       protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
           super.onLayout(changed, left, top, right, bottom);
           try {
               ((ViewGroup) getParent()).setClipChildren(false);
           } catch (Exception e){
               e.printStackTrace();
           }
       }
   }
   

2. 创建对应的的ReactVGManager

   public class ReactVGManager extends ViewGroupManager<ReactViewGroup> {
       private static final String OVERFLOW_MANAGER_NAME = "NativeViewGroup";
   
       @Override
       public String getName() {
           return OVERFLOW_MANAGER_NAME;
       }
   
       @Override
       protected ReactViewGroup createViewInstance(ThemedReactContext reactContext) {
           ReactViewGroup reactViewGroup = new RNViewGroupLayout(reactContext);
           return reactViewGroup;
       }
   }
   

3. 创建对应的NativeReactPackage

   public class NativeReactPackage implements ReactPackage {
   
      @Override
      public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
          List<NativeModule> modules=new ArrayList<>();
          modules.add(new AhsNativeModule(reactContext)); //此处放置供RN与Android通信的方法，下面会讲述
          return modules;
      }
   
      @Override
      public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
          List<ViewManager> views = new ArrayList<>();
          views.add(new ReactVGManager());
          return views;
      }
   }
   

4. 在Android项目中的application中设置对应的ReactNativeHost

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

5. 在RN项目中创建NativeViewGroup.js

   import React from 'react';
   import PropTypes from 'prop-types'
   import {
    requireNativeComponent,
    View,
   } from 'react-native';
   
   class NativeViewGroup1 extends React.Component {
   
     render() {
       return <AhsVG  {...this.props}/>
     }
   }
   
   NativeViewGroup1.propTypes = {
     ...View.propTypes,
   };
   
   const AhsVG = requireNativeComponent('NativeViewGroup', NativeViewGroup1)
   
   export default NativeViewGroup1
   

6. 创建AhsNativeModule供RN与Android通信使用

   public class AhsNativeModule  extends ReactContextBaseJavaModule {
       public static final String REACT_NATIVE_CLASSNAME = "AhsNativeModule";
       private ReactApplicationContext mContext;
       public static final String TAG = "TAG";
   
       public AhsNativeModule(ReactApplicationContext reactContext) {
           super(reactContext);
           mContext = reactContext;
       }
   
       @Override
       public String getName() {
           return REACT_NATIVE_CLASSNAME;
       }
   
       /**
        * rn调用Native,并获取返回值
        * @param key
        * @param callback
        */
       @ReactMethod
       public void rnGetNativeData(String key, Callback callback) {
           String result = "我可以根据你的key拿到你想要的数据";
           callback.invoke(result);
       }
   
      /**
        * RN关闭当前页面
        */
       @ReactMethod
       public void finishThisPage(){
           if (getCurrentActivity() != null){
               getCurrentActivity().finish();
           }
       }
   
       /**
        * 向RN传递常量
        */
       @Nullable
       @Override
       public Map<String, Object> getConstants() {
           Map<String,Object> params = new HashMap<>();
           params.put("Constant","我是常量，传递给RN");
           return params;
       }
   

通过这个事例也简单介绍了RN如何去调用原生的控件与自定义组件等操作，此处就不讲述原生Android与RN如何通信了，之前已经讲述过，需要的请看 【Android项目集成RN系列：修改端口号 / 离线包 / 消息通信】 。