1. 程式人生 > >React-native 呼叫原生元件

React-native 呼叫原生元件

一,繼承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);