RN系列：RN使用Android原生控件或自定义组件

【简述RN集成到Android原生项目】
【RN系列：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

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

创建对应的的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;
    }
}

创建对应的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;
   }
}

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

在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

创建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如何通信了，之前已经讲述过，需要的请看【RN系列：Android原生与RN如何交互通信】。

作者：闲庭CC
链接：https://www.jianshu.com/p/82d915dfac0e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

RN系列：RN使用Android原生控件或自定义组件

浏览过的版块