react-native 与 java 混合开发 2/3 使用原

有哪些场景是需要混合开发呢？

1. react-native 原生android的UI的支持
2. react-native 的一些交互逻辑需要java处理(比如APP跳转微信小程序)

根据 单一职责的原则 ，文章分为三篇，此篇为react-native 与 java 混合开发 2/3 使用原生UI

关键
关键是js与java的通信

友情提示：react-native 与 java 混合开发 1/3 框架搭建 是基础，请确定你的框架搭建

步骤
我们拿react-native-linear-gradient 组件举例
1.我们从 npm 仓库中下载react-native-linear-gradient

npm i react-native-linear-gradient --save
react-native link

2.在MainActivity下添加 addPackage(new LinearGradientPackage()),如下

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new LinearGradientPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

以上就可以在js端使用了
分析
在react-native-linear-gradient中有三个类
分别是：
LinearGradientView 继承 View 类

LinearGradientManager 继承 SimpleViewManager<LinearGradientView> 类

LinearGradientPackage 实现 ReactPackage 接口

他们的关系是:
LinearGradientManager 管理 LinearGradientView

LinearGradientPackage 管理 LinearGradientManager

LinearGradientPackage 抛出引用给 ReactInstanceManager

值得注意的是:
在LinearGradientPakcage中有两个方法:
createNativeModules,
createViewManagers,
对于原生UI,需要在createViewManagers中将ViewManager实例返回，如:

public class LinearGradientPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new LinearGradientManager());
    }
}