一，继承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);

• 上一篇：react-native 调用原生模块详解下一篇：react-native 在任意view fragment