React Native 学习笔记十六（细节分析）

//创建一个ReactRootView，把它设置成Activity的主视图
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
// 设置模块的主入口的JS文件为index.android.js
.setJSMainModuleName("index.android")
// 一般情况下创建父类继承自MainReactPackage 获取已经创建的package集合然后将新的package添加进去
// 在这里为了省事我就不再创建
.addPackage(new MainReactPackage())
.addPackage(new RegistPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 再当前主视图中添加对应视图中

mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);

嵌入原生这段代码是不能省略的但是之前我为了省事没有做package集合这次看了一下源码发现 MainReactPackage 其实已经实现了Reactpackage接口

其中createViewmanager方法中已经帮我们创建了很多常用控件的Manager

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
ARTRenderableViewManager.createARTGroupViewManager(),
ARTRenderableViewManager.createARTShapeViewManager(),
ARTRenderableViewManager.createARTTextViewManager(),
new ARTSurfaceViewManager(),
new ReactDialogPickerManager(),
new ReactDrawerLayoutManager(),
new ReactDropdownPickerManager(),
new ReactHorizontalScrollViewManager(),
new ReactImageManager(),
new ReactModalHostManager(reactContext),
new ReactProgressBarViewManager(),
new ReactRawTextManager(),
new ReactScrollViewManager(),
new ReactSliderManager(),
new ReactSwitchManager(),
new FrescoBasedReactTextInlineImageViewManager(),
new ReactTextInputManager(),
new ReactTextViewManager(),
new ReactToolbarManager(),
new ReactViewManager(),
new ReactViewPagerManager(),
new ReactVirtualTextViewManager(),
new ReactWebViewManager(),
new RecyclerViewBackedScrollViewManager(),
new SwipeRefreshLayoutManager());
}

为了注册方便封装一下 reactPackage

abstract class BaseReactPackage implements ReactPackage {

    private ArrayList modules;

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        modules = new ArrayList<>();
        if (setViewManager(reactContext)!=null)
            modules.addAll(setViewManager(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

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

    /**
     * 添加新的ViewManager
     * @param reactContext
     * @return
     */
    protected abstract List<NativeModule> setViewManager(ReactApplicationContext reactContext) ;
}

使用方法

public class AddReactPackage extends BaseReactPackage {
    @Override
    protected List<NativeModule> setViewManager(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastUtils(reactContext));
        modules.add(new NetMoudle(reactContext));
        return modules;
    }
}

React Native 学习笔记十六（细节分析）

浏览过的版块