react native 比 java_react-native 与 java 混合开发 2/3 使用原生UI

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

react-native 原生android的UI的支持

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 类

LinearGradientPackage 实现 ReactPackage 接口

他们的关系是:

LinearGradientManager 管理 LinearGradientView

LinearGradientPackage 管理 LinearGradientManager

LinearGradientPackage 抛出引用给 ReactInstanceManager

值得注意的是:

在LinearGradientPakcage中有两个方法:

createNativeModules,

createViewManagers,

对于原生UI,需要在createViewManagers中将ViewManager实例返回，如:

public class LinearGradientPackage implements ReactPackage {

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Arrays.asList(

new LinearGradientManager());

}

}