React Native 已经封装了大部分最常见的组件,譬如ScrollView
和TextInput
,但不可能封装全部组件。
在这个例子里,我们来看看为了让 JavaScript 中可以使用 ImageView,需要做哪些准备工作。
原生视图需要被一个ViewManager
的派生类(或者更常见的,SimpleViewManager
的派生类)创建和管理。一个SimpleViewManager
可以用于这个场景,是因为它能够包含更多公共的属性,譬如背景颜色、透明度、Flexbox 布局等等。
- 创建一个 ViewManager 的子类。
- 实现
createViewInstance
方法。 - 导出视图的属性设置器:使用
@ReactProp
(或@ReactPropGroup
)注解。 - 把这个视图管理类注册到应用程序包的
createViewManagers
里。 - 实现 JavaScript 模块。
-
... public class ReactImageManager extends SimpleViewManager<ReactImageView> { public static final String REACT_CLASS = "RCTImageView"; ReactApplicationContext mCallerContext; public ReactImageManager(ReactApplicationContext reactContext) { mCallerContext = reactContext; } @Override public String getName() { return REACT_CLASS; }
@Override
public ReactImageView createViewInstance(ThemedReactContext context) {
return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
} -
@Override
public ReactImageView createViewInstance(ThemedReactContext context) {
return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
}-
4. Register the
ViewManager
-
- 把这个视图管理类注册到应用程序包的
- 导出视图的属性设置器:使用
- 实现