React-native自定义安卓组件

一、创建自己的View

public class ReactMaterialView extends View {
/**
* 文本
*/
private String mTitleText;
/**
* 文本的颜色
*/
private String mTitleTextColor="#ff0000";
/**
* 文本的大小
*/
private int mTitleTextSize;

/**
* 绘制时控制文本绘制的范围
*/
private Rect mBound;
private Paint mPaint;
//构造方法
public ReactMaterialView(Context context, AttributeSet attrs){
this(context, attrs, 0);
Log.i("construct","构造方法1");
}
//构造方法
public ReactMaterialView(Context context)
{
this(context, null);
Log.i("construct","构造方法2");
}

/**
* 获得我自定义的样式属性
*
* @param context
* @param attrs
* @param defStyle
*/
public ReactMaterialView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
/**
* 获得我们所定义的自定义样式属性
*/
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ReactMaterialView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.ReactMaterialView_titleText:
mTitleText = a.getString(attr);
break;
case R.styleable.ReactMaterialView_titleTextColor:
// 默认颜色设置为黑色
mTitleTextColor = Integer.toHexString(a.getColor(attr, Color.BLACK));
break;
case R.styleable.ReactMaterialView_titleTextSize:
// 默认设置为16sp，TypeValue也可以把sp转化为px
mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
}

}
a.recycle();
Log.i("construct","构造方法3");
/**
* 获得绘制文本的宽和高
*/
mPaint = new Paint();
mBound = new Rect();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas)
{
mPaint.setTextSize(mTitleTextSize);
mPaint.setColor(Color.YELLOW);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
mPaint.setColor(Color.parseColor(mTitleTextColor));
float x=getWidth() / 2 - mBound.width() / 2;
float y= getHeight() / 2 + mBound.height() / 2;
Log.i("construct",this.mTitleText+mTitleTextColor+this.mTitleTextSize+";X:"+x+",Y:"+y);
canvas.drawText(mTitleText, x, y, mPaint);
}
//给当前对象的属性赋值，方便后面调用
protected void setmTitleText(String mTitleText){this.mTitleText=mTitleText;}
protected void setmTitleTextColor(String mTitleTextColor){
this.mTitleTextColor=mTitleTextColor;
}
protected void setmTitleTextSize(int mTitleTextSize){
this.mTitleTextSize=mTitleTextSize;
}
}

二、创建ViewManager的子类

public class ReactMaterialdrawerManager extends SimpleViewManager<ReactMaterialView> {
//定义名字，必须的部分
public static final String RTCNAME="RCTMaterialView";
//getName方法返回的名字会用于在JavaScript端引用这个原生视图类型
@Override
public String getName() {
return RTCNAME;
}
//实现方法createViewInstance，用来生成上面的自定义view的对象
@Override
protected ReactMaterialView createViewInstance(ThemedReactContext reactContext) {
return new ReactMaterialView(reactContext);
}
// 通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法
@ReactProp(name = "titleText")
public void setmTitleText(ReactMaterialView view,  @Nullable String titleText) {
Log.i("ViewManager","settitleText");
view.setmTitleText(titleText);
}

@ReactProp(name = "titleTextColor")
public void setmTitleTextColor(ReactMaterialView view, @Nullable String titleTextColor) {
Log.i("ViewManager","settitleTextColor");
view.setmTitleTextColor(titleTextColor);
}

@ReactProp(name = "titleTextSize")
public void setmTitleTextSize(ReactMaterialView view, int titleTextSize) {
Log.i("ViewManager","setTextSize");
view.setmTitleTextSize(titleTextSize);
}
}

三、注册ViewManager

/**
* Created by Jing on 15/9/22.
*/
public class CustomReactPackage implements ReactPackage {

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

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
//最后一步就是把视图控制器注册到应用中。这和原生模块的注册方法类似，唯一的区别是我们把它放到createViewManagers方法的返回值里。
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
List<ViewManager> result = new ArrayList<ViewManager>();
result.add(new ReactMaterialdrawerManager());
return result;
}
}

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new CustomReactPackage())//这里引入了上面的类
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);

四、以上完成之后就可以在js中声明调用了，方式如下:

//定义
var attrs= {
name: 'RCTView',
propTypes: {
...View.propTypes,
titleText: PropTypes.string,
titleTextColor: PropTypes.string,
titleTextSize: PropTypes.number,
},
};
//前提是requireNativeComponent这个组件也得引入
var RCTTextView = requireNativeComponent('RCTMaterialView', attrs);
//使用
<RCTTextView
style={{flex:1,width:100,height:100}}
titleText={"好好计划"}
titleTextColor={"#317ef3"}
titleTextSize={50}
/>

五、以上就可以完成一个简单的可修改内容和字体颜色和字号的textview了，效果如下：