ReactNative与Android原生交互

2,449 阅读1分钟

1.Android提供方法给ReactNative调用

参数类型

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

1.在MainApplication添加你的package

2.在package中添加你的module
3.在module中添加你提供给js调用的方法
4.js中导入并使用

2.Android提供自定义View给ReactNative使用

1.在MainApplication添加你的package

2.在package中添加你的ViewManager
3.在你的ViewManager中添加给RN掉用的属性
4.添加java代码

public class GradualButton extends FrameLayout implements LifecycleEventListener {
    protected ThemedReactContext mContext;
    private TextView mGradualButton;
    private boolean mDisabled;

    public GradualButton(@NonNull ThemedReactContext context) {
        super(context);
        init(context);
    }

    public GradualButton(@NonNull ThemedReactContext context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public GradualButton(@NonNull ThemedReactContext context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public void init(ThemedReactContext context) {
        mContext = context;
        mContext.addLifecycleEventListener(this);
        mGradualButton = new TextView(context);
        mGradualButton.setGravity(Gravity.CENTER);
        mGradualButton.setTextColor(Color.WHITE);
        mGradualButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        setPadding(0, 0, 0, 0);

        addView(mGradualButton);
        initListener();
    }


    protected void initListener() {
        mGradualButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!mDisabled) {
                    sendMessageToRn("onClick", null);
                }
            }
        });
        mGradualButton.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                if (!mDisabled) {
                    sendMessageToRn("onLongClick", null);
                }
                return false;
            }
        });
    }


    public void setWidth(int width) {
        int resultWidth = Dp2Px(getContext(), width);
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mGradualButton.getLayoutParams();
        layoutParams.width = resultWidth;
        mGradualButton.setLayoutParams(layoutParams);
    }

    public void setHeight(int height) {
        int resultHeight = Dp2Px(getContext(), height);
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mGradualButton.getLayoutParams();
        layoutParams.height = resultHeight;
        mGradualButton.setLayoutParams(layoutParams);
    }

    public void setText(String text) {
        mGradualButton.setText(text);
    }

    public void setDisable(boolean disabled) {
        mDisabled = disabled;
        mGradualButton.setClickable(!disabled);
    }

    /**
     * 回调RN的事件
     *
     * @param eventName 事件名称
     * @param data      携带数据
     */
    public void sendMessageToRn(String eventName, WritableMap data) {
        ReactContext reactContext = (ReactContext) getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                getId(),//native层和js层两个视图会依据getId()而关联在一起
                eventName,//事件名称
                data//事件携带的数据
        );

    }

    public int Dp2Px(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

    @Override
    public void onHostResume() {

    }

    @Override
    public void onHostPause() {

    }

    @Override
    public void onHostDestroy() {

    }
}

5.在RN中使用

原生提供给RN调用的名称,也就是getName()方法的返回值,最好单独放一个文件,便于管理