Android与RN层的交互

Android跳转到RN页面
由于主客是以插件化的方式集成功能插件的,所以在主客中Android跳转到RN页面需要plugin、module和component。plugin、module不过多解释,component对应的是具体的js页面,要成功启动此页面,需要在对应的RN二方库中注册此页面。例如:

AppRegistry.registerComponent(‘MyDoctors’, () => MyDoctors);
注:至于为什么写一个RN的Component,然后系统就能启动,可以自己新建一个RN的工程,然后看下React Native启动流程分析。

Android与RN页面的交互
普通流程
RN如何调用原生Android的原生功能
rn调用原生的Android功能分为以下几步:

1,自定义原生实现类;

2,注册实现类;

3,RN的js部分调用原生;

首先,创建一个继承ReactContextBaseJaveModule的抽象类,此抽象类需要重写getName()函数用于返回一个字符串,这个字符串会在JavaScript端标记使用的模块。然后,可以编写一个函数暴露给javascript端,并且这个函数需要使用注解@ReactMethod进行标记。由于React Native的跨语言访问是异步进行的,所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。

例如,SomeModule:



package com.untitled;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import javax.annotation.Nonnull;

public class SomeModule extends ReactContextBaseJavaModule {

    public SomeModule(@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Nonnull
    @Override
    public String getName() {
        return "SomeModule";
    }

    @ReactMethod
    public void callbackMethod(String paramsFromJS, Callback ok, Callback error) {
        boolean result = true;
        if (result) {
            ok.invoke("callback ok");
        } else {
            error.invoke("callback ok");
        }
    }

    @ReactMethod
    public void promiseMethod(String paramsFromJS, Promise promise){
        boolean result = true;
        if (result) {
            promise.resolve("promise ok");
        } else {
            promise.reject("promise error");
        }
    }
}

然后,需要创建一个实现类用于实现ReactPackage接口,该接口中有三个抽象函数需要实现,分别是createNativeModules,createJSModules,createViewManagers。其中,ReactPackage实现类最关键的函数就是createNativeModules,在该函数中我们需要添加前一步创建的ReactContextBaseJavaModule子类用于构建ReactInstanceManager的实例,并通过调用 addPackage()函数,将上一步实现的ReactPackage添加进去。

例如,SomeReactPackage:

public class SomeReactPackage implements ReactPackage {

    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List modules=new ArrayList<>();
        SomeModule module = new SomeModule(reactContext);
        modules.add(module);
        return modules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }
}

接下来,还需要在MainPackage类的getPackages()方法中添加注册这个自定义的模块。

public class MainApplication extends Application implements ReactApplication {

    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 SomeReactPackage()   //注册自定义模块
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

一般来说,到此原生模块部分就可以了。接下来,在RN的js端就可以调用原生模块的函数了,流程还是比较清楚的。

export default class MainPage extends Component<Props> {

    constructor(props) {
        super(props);
        this.callBack = this.callBack.bind(this);
        this.promissCallback = this.promissCallback.bind(this);
    }

    callBack() {
        NativeModules.SomeModule.callbackMethod('params', (result) => {
            console.log('callBack ok======>' + result)
        }, (error) => {
            console.log('callBack error======>' + error)
        });
    }

    promissCallback() {
        NativeModules.SomeModule.promiseMethod('params').then((result) => {
            console.log('Promiss ok======>' + result)
        }).catch((error) => {
            console.log('Promiss error======>' + result)
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.callBack} style={styles.bindButtonStyle}>
                    <Text style={styles.submitStyle}>回调方式</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.promissCallback} style={styles.bindButtonStyle}>
                    <Text style={styles.submitStyle}>Promiss方式</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    bindButtonStyle: {
        backgroundColor: '#42B3E3',
        borderRadius: 22,
        height: 44,
        marginRight: 15,
        marginLeft: 15,
        marginTop: 20,
        justifyContent: 'center'
    },
    submitStyle: {
        alignSelf: 'center',
        fontSize: 16,
        color: 'white'
    },
});

最后,启动上面的项目,既可以看到js调用原生部分输出的数据,如下图。

注意:boolean、int、double、float、String这些java的基本值类型都可以转,但是不能直接使用object类型进行相互调用。

展开阅读全文
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值