ReactNative调用android原生View

RN开发过程中，React Native是将原生控件封装桥接成JS组件来使用的，这保证了其性能的高效性。但是有时候官方封装的常用组件不能满足需求，就需要结合原生UI使用，例如：对原生实现的UI复用；复杂UI仍然需要原生自定义View实现。接下来就简单记录下RN开发过程中调用原生UI的流程。

例如下面这个UI效果，就需要用到Android原生自定义View实现：

以上图实现效果为例，分别从Android端和RN端说明。

Android端

1. 创建自定义控件CircleMenu；

public class CircleMenu extends View {
   
    private Context mContext;

    /** 点击外面 */
    public static final int DL_TOUCH_OUTSIDE = -2;
    /** 点击中间点 */
    public static final int DL_TOUCH_CENTER = -1;

    /** 中心点的坐标X */
    private float mCoreX;
    /** 中心点的坐标Y */
    private float mCoreY;
    /** 是否有中心按钮 */
    private boolean mHasCoreMenu;
    /** 中心按钮的默认背景 */
    private int mCoreMenuNormalBackgroundColor;
    /** 中间按钮的描边颜色 */
    private int mCoreMenuStrokeColor;
    /** 中间按钮的描边边框大小 */
    private float mCoreMenuStrokeSize;
    /** 中间按钮选中时的背景颜色 */
    private int mCoreMenuSelectedBackgroundColor;
    /** 中心按钮圆形半径 */
    private float mCoreMenuRoundRadius;
    /** 菜单数量 */
    private int mRoundMenuNumber;
    /** 菜单偏移角度 */
    private float mRoundMenuDeviationDegree;
    /** 菜单图片 */
    private ArrayList<Bitmap> mRoundMenuDrawableList = new ArrayList<>();
    /** 是否画每个菜单扇形到中心点的直线 */
    private boolean mIsDrawLineToCenter;
    /** 菜单正常背景颜色 */
    private int mRoundMenuNormalBackgroundColor;
    /** 菜单点击背景颜色 */
    private int mRoundMenuSelectedBackgroundColor;
    /** 菜单描边颜色 */
    private int mRoundMenuStrokeColor;
    /** 菜单描边宽度 */
    private float mRoundMenuStrokeSize;
    /** 菜单图片与中心点的距离 百分数 */
    private float mRoundMenuDistance;
    /** 点击状态 -2是无点击，-1是点击中心圆，其他是点击菜单 */
    private int onClickState = DL_TOUCH_OUTSIDE;
    /** 记录按下时间，超过预设时间算长按按钮 */
    private long mTouchTime;

    public CircleMenu(Context context) {
   
        super(context);
        init(context, null);
    }

    public CircleMenu(Context context, @Nullable AttributeSet attrs) {
   
        super(context, attrs);
        init(context, attrs);
    }

    public CircleMenu(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
   
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    /**
     * 初始化数据
     * @param context
     * @param attrs
     */
    private void init(Context context, @Nullable AttributeSet attrs) {
   
        mContext = context;
        // 加载默认资源
        final Resources res = getResources();
        final boolean defaultHasCoreMenu = res.getBoolean(R.bool.default_has_core_menu);
        final int defaultCoreMenuNormalBackgroundColor = res.getColor(R.color.default_core_menu_normal_background_color);
        final int defaultCoreMenuStrokeColor = res.getColor(R.color.default_core_menu_stroke_color);
        final float defaultCoreMenuStrokeSize = res.getDimension(R.dimen.default_core_menu_stroke_size);
        final int defaultCoreMenuSelectedBackgroundColor = res.getColor(R.color.default_core_menu_selected_background_color);
        final float defaultCoreMenuRoundRadius = res.getDimension(R.dimen.default_core_menu_round_radius);
        final int defaultRoundMenuNumber = res.getInteger(R.integer.default_round_menu_number);
        final int defaultRoundMenuDeviationDegree = res.getInteger(R.integer.default_round_menu_deviation_degree);
        final boolean defaultIsDrawLineToCenter = res.getBoolean(R.bool.default_is_draw_line_to_center);
        final int defaultRoundMenuNormalBackgroundColor = res.getColor(R.color