ReactNative如何在JS中引用原生自定义控件（rn变化太快，网上很多教程有坑，这个我研究后可用，特意分享）

直接写一个Demo例子，有相关功底的肯定明白，会对特别的地方进行提醒，本文基于https://blog.csdn.net/lintcgirl/article/details/53489490，但是按此链接文章不可用。

 

首先是JAVA部分：

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNMyTest";
    }
}

 

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.rnmytest.view.AppReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new AppReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

第一坑，之前的项目可能创建时间太久，ReactApplication完全无法引用，后面我是重新新建一个demo测试后能成功导入，各种百度google无法解决这个方案，如有能解决的朋友请告诉我。

 

下面是自定义的view

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

/**
 * Created by bingmingli on 2018/6/8.
 */

public class AppReactPackage 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 CircleManager()
        );
    }
}

第二坑：注释部分的方法在新版本已经去除了

 

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

import com.facebook.react.uimanager.PixelUtil;

public class CircleView extends View {
    private final String TAG = "CircleView";
    private Paint mPaint; // 画笔
    private float mRadius;  // 圆的半径

    public CircleView(Context context) {
        super(context);
        mPaint = new Paint();
        mPaint.setColor(0xAA000000);
    }

    /**
     * 设置圆的半径
     * @param radius
     */
    public void setRadius(Integer radius) {
        /**
         * 由于JS传过的数字是dip单位,需要转换为实际像素
         * 使用com.facebook.react.uimanager包中的PixelUtil,进行转换
         */
        mRadius = PixelUtil.toPixelFromDIP(radius);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // 画一个半径为100px的圆
        Log.d(TAG, "绘图");
    }
}

 

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

/**
 * Created by bingmingli on 2018/6/8.
 */

public class CircleManager extends SimpleViewManager<CircleView> {

    /**
     * 设置js引用名
     */
    @Override
    public String getName() {
        return "MCircle";
    }

    /**
     * 创建UI组件实例
     */
    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }

    /**
     * 传输半径参数
     */
    @ReactProp(name = "radius")
    public void setRadius(CircleView view, Integer radius) {
        view.setRadius(radius);
    }
}

 

下面是JS部分：

circle.js

import React, { Component } from 'react';
import {
  View,
  requireNativeComponent
} from 'react-native';

import PropTypes from 'prop-types'
// const RCTCircle = requireNativeComponent('MCircle', {
//   propTypes: {
//     radius: PropTypes.number,
//     ...View.propTypes // 包含默认的View的属性
//   },
// });
// module.exports=RCTCircle;

var iface = {
  name: 'MCircle',
  propTypes: {
    radius: PropTypes.number,
    ...View.propTypes
  },
};
 
module.exports = requireNativeComponent('MCircle', iface);

第三坑：PropTypes的导入方式为import PropTypes from 'prop-types'
第四坑：...View.propTypes这个必须有，不然自己的属性不能识别
第五坑：iface里面的name 与 requireNativeComponent的第一个参数需要一致，很多教程这里不一致，导致找不到这个原生view

 

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import MCircle from './circle';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<Props> {
  render() {
    return (
                <View>
                    <MCircle
                          style={{width: 100, height: 100}}
                          radius={50}
                    />
                </View>
            ); 
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

提醒：导入的view必须名字也一致，这不用多说了