Ract Native 原生模块、UI组件封装（Android篇）

前言

React Native的API无法满足我们需求或者需要实现某些高性能、多线程的时候。
我们把React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。
这是一个相对高级的特性，我们并不认为它应当在日常开发的过程中经常出现，但是具备这种能力很重要的。

原生模块

第一步：原生模块

React Native中，一个本地的“原生模块”其实就是继承了ReactContextBaseJavaModule的Java类，它可以实现一些JavaScript所需的功能。
...
package com.rn_primor_projecy;
import android.widget.Toast;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class UserNativeModules extends ReactContextBaseJavaModule{
    public UserNativeModules(ReactApplicationContext reactContext){
        super(reactContext);
    }

    @Override
    public String getName(){****
        return "UserNativeModules";         //模块名称  
    }
    /**
     * 要导出一个方法给JavaScript使用，java方法需要使用注解@ReactMothed
     * 方法的返回类型必须为void，React Native的跨域语言访问异步进行的
     */ 
    @ReactMothed    
    public void toShow(String content){
        Toast.makeText(getReactApplicationContext(),content,Toast.LENGHT_LONG).show();
    }
}
...

第二步：注册模块

Java这边要做的最后一件事情就是注册这个模块。
...
package com.rn_primor_projecy;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.rn_primor_projecy.TestViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class UserReactPackage implements ReactPackage {
    ...
    /**
     * 注册模块，否则JavaScript中无法被访问到
     */
    @Override
    public List<NativeModule> createNativeModules(
           ReactApplicationContext reactContext) {
    
           List<NativeModule> modules = new ArrayList<>();
           modules.add(new UserNativeModules(reactContext));
           return modules;
    }
}
...     

第三步：导出包

在android/app/main/java.../MainApplication.java 
public class MainApplication extends Application implements ReactApplication{
    ...
    @Override
    protected List<ReactPackage> getPackages(){
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new UserReactPackage()  
        );
    }
    ...
}          

第四步：React Native中调用

...
//引入原生模块
import {NativeModules} from 'react-native';
var UserNativeModules = NativeModules.UserNativeModules;
const toShow = ()=>{
    UserNativeModules.toShow("调用原生Toast")；
}
...
render(){
    return (
        <Button
            title="测试原生模块"
            onPress={toShow}
            />
    )
}

UI组件

第一步：创建View

...
package com.rn_primor_projecy;
import android.content.Context;
import android.graphics.Color;
import android.view.View;

public class RnView extends View{
    public RnView(Context context){
        super(context);
        this.setBackgroundColor(Color.rgb(0,255,0));
    }
}
...

第二步：创建View管理器

...
package com.rn_primor_projecy;

import com.facebook.react.uimanger.SimpleViewManager;
import com.facebook.react.uimanger.ThemedReactContext;

public class RnViewManager extends SimpleViewManager<RnView>{

    @Override
    public String getName(){
        return 'RnView';        //返回UI组件名称
    }

    @Override
    protected RnView createViewInstance(ThemedReactContext reactContext){
        return new RnView(reactContext);
    }
}   
...

第三步：注册模块

...
public class UserReactPackage implements ReactPackage {
    /**
     * 注册UI组件，否则JavaScript中无法被访问到 
     */
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           List<ViewManager> modules = new ArrayList<>();
           modules.add(new TestViewManager());
           return modules;
    }
    ...
}
...

第四步：导出包

同上  ...

第五步：React Native中调用

...
import {requireNativeComponent} from 'react-native';
const RnView = requireNativeComponent('RnView',null);
...
render(){
    return(
        ...
        <RnView style={{width:100,height:100}} />
        ...
    )
}
...

结束语

整篇文章主要跟大家介绍一下React Native如何使用Android原生模块、UI组件，希望能够帮助大家解决实际的开发中遇到的问题。小伙伴一起加油吧！