ReactNative调用android原生View

本文主要是介绍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