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());
}
}