React-native 调用原生组件

来源：互联网发布：js uikit miniui 编辑：程序博客网时间：2024/05/22 01:30

一，继承SimpleViewManager<View> 实现如下方法，自定义方法@ReactProp（name=”。。。。“）如下所示

** * 图片加载控件 * Created by ybj on 2016/2/24. */public class ReactImageManager extends SimpleViewManager<ReactImageView> {    public static final String REACT_CLASS = "RCTTBImage";    @Override    public String getName() {        return REACT_CLASS;    }    @Override    protected ReactImageView createViewInstance(ThemedReactContext reactContext) {       // ReactImageView imageView=  new ReactImageView(reactContext);        ReactImageView imageView = new ReactImageView(reactContext, Fresco.newDraweeControllerBuilder(), null);        imageView.setScaleType(ImageView.ScaleType.FIT_XY);        return imageView;    }/*    @ReactProp(name = PROP_TEST_ID)    @Override    public void setTestId(ImageView view, int testId) {        super.setTestId(view, testId);    }*/   //图片url设置    @ReactProp(name = "urlPath")    public void setUrlPath(ReactImageView view,@Nullable String url) {        Log.d("TAG_YBJ", "setUrl" + url);        if (url.toLowerCase().endsWith(".gif")) {           /* DraweeController controller = Fresco.newDraweeControllerBuilder().setUri(url)                    .setAutoPlayAnimations(true).build();            this.setController(controller);*/        } else {            /*this.setImageURI(Uri.parse(url));*/        }        view.setSource(url);      //  Image13lLoader.getInstance().loadImage(url,view);    }    //边角度数设置    @ReactProp(name = "borderRadius", defaultFloat = 0f)    public void setBorderRadius(ReactImageView view, float borderRadius) {        view.setBorderRadius(borderRadius);    }    //缩放类型    @ReactProp(name = ViewProps.RESIZE_MODE)    public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {        view.setScaleType(ImageResizeMode.toScaleType(resizeMode));    }}

二，实现 ReactPackage

/** * 图片加载 需要加载图片需要注册this * Created by ybj on 2016/2/24. */        public class ReactImagePackage implements ReactPackage {            @Override            public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {                return Collections.emptyList();            }            @Override            public List<Class<? extends JavaScriptModule>> createJSModules() {                return Collections.emptyList();            }            @Override            public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {                return Arrays.<ViewManager>asList(                        new ReactImageManager());    }}
三，添加package
        .setApplication(((Activity) mContext).getApplication())        .setJSBundleFile(bundleFile)                //  .setJSMainModuleName("test")        .setNativeModuleCallExceptionHandler(new NativeModuleCallExceptionHandler() {            @Override            public void handleException(Exception e) {            }        })      /* .setBundleAssetName("webviewindex.bundle")        .setJSMainModuleName("webviewindex")*/        .addPackage(new TBRnPackage())        .addPackage(new ReactImagePackage())        .setUseDeveloperSupport(false)        .setInitialLifecycleState(LifecycleState.RESUMED)        .build();mReactRootView.startReactApplication(mReactInstanceManager, "BZMHomeOperationActivity", null);myreact.addView(mReactRootView);

0 0