假設(shè)現(xiàn)在我們要畫一個(gè)圓纺阔，當(dāng)然，你可以用js自己去實(shí)現(xiàn)即寡，但是今天要講的并不是js去實(shí)現(xiàn)圓徊哑，而是在Native端去寫一個(gè)View去暴露給js調(diào)用，ok聪富，我們廢話少說(shuō)莺丑，進(jìn)入正題
暴露一個(gè)簡(jiǎn)單控件給js調(diào)用分為以下幾個(gè)步驟：
1.自定義一個(gè)View控件
2.自定義一個(gè)Manager實(shí)現(xiàn)SimpleViewManager
3.將自定義的Manager注冊(cè)進(jìn)Package
4.js調(diào)用
自定義View控件相信android老司機(jī)們?cè)缫疡{輕就熟，不再啰嗦墩蔓，直接看代碼
public class CircleView extends View {
private static final String TAG = "CircleView";
private Paint mPaint;
private float mRadius;
public CircleView(Context context) {
super(context);
mPaint = new Paint();
}
/**
* 設(shè)置圓的背景色
* @param color
*/
public void setColor(Integer color) {
mPaint.setColor(color); // 設(shè)置畫筆顏色
invalidate(); // 更新畫板
}
/**
* 設(shè)置圓的半徑
* @param radius
*/
public void setRadius(Integer radius) {
/**
* 由于JS傳過(guò)的數(shù)字是dip單位,需要轉(zhuǎn)換為實(shí)際像素
* 使用com.facebook.react.uimanager包中的PixelUtil,進(jìn)行轉(zhuǎn)換
*/
mRadius = PixelUtil.toPixelFromDIP(radius);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);;
}
下面開始自定義Manager：
public class CircleManager extends SimpleViewManager<CircleView> {
@Override
public String getName() {
return "MCircle";
}
/**
* 創(chuàng)建UI組件實(shí)例
* @param reactContext
* @return CircleView
*/
@Override
protected CircleView createViewInstance(ThemedReactContext reactContext) {
return new CircleView(reactContext);
}
/**
* 傳輸背景色參數(shù)
* @param view
* @param color
*/
@ReactProp(name = "color")
public void setColor(CircleView view, Integer color) {
view.setColor(color);
}
/**
* 傳輸半徑參數(shù)
* @param view
* @param radius
*/
@ReactProp(name = "radius")
public void setRadius(CircleView view, Integer radius) {
view.setRadius(radius);
}
}
注意這里的getName方法的返回值要與js里一致梢莽，這個(gè)文章后面再詳細(xì)說(shuō)明，先有個(gè)大致的概念奸披，同時(shí)還需要注意的是@ReactProp這個(gè)注解
OK昏名，我們有了Manager，現(xiàn)在去注冊(cè)到package阵面，很簡(jiǎn)單
public class CommPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new CommonModule(reactContext));
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
List<ViewManager> views = new ArrayList<>();
views.add(new CircleManager());
return views;
}
}
注意到這里的createViewManagers不再返回一個(gè)emptyList轻局，而是把CircleManager給add進(jìn)去了
最后，我們寫一下js代碼
首先我們需要寫一個(gè)Circle.js
import React, { Component } from 'react';
import { requireNativeComponent, View, processColor } from 'react-native'; //processColor=>字符Color轉(zhuǎn)換為數(shù)字
import PropTypes from 'prop-types';
const MCircle = requireNativeComponent('MCircle', {
propTypes: {
color: PropTypes.number,
radius: PropTypes.number,
...View.propTypes // 包含默認(rèn)的View的屬性
},
});
class Circle extends Component {
static propTypes = {
radius: PropTypes.number,
color: PropTypes.string, // 這里傳過(guò)來(lái)的是string
...View.propTypes // 包含默認(rèn)的View的屬性
}
render() {
const { style, radius, color } = this.props;
return (
<MCircle
style={style}
radius={radius}
color={processColor(color)}
/>
);
}
}
module.exports = Circle;
注意這邊的requireNativeComponent有兩個(gè)參數(shù)：第一個(gè)參數(shù)是MCircle膜钓，這個(gè)名字要與上面的CircleManager的getName返回值保持一致嗽交；第二個(gè)參數(shù)約定了屬性的一些類型卿嘲，可以看到有一個(gè)number類型的color屬性颂斜，一個(gè)number類型的radius屬性，這兩個(gè)屬性是怎么對(duì)應(yīng)到Native端的拾枣，這就要說(shuō)到上面的@ReactProp注解沃疮，我們截取下之前的代碼
/**
* 傳輸背景色參數(shù)
* @param view
* @param color
*/
@ReactProp(name = "color")
public void setColor(CircleView view, Integer color) {
view.setColor(color);
}
/**
* 傳輸半徑參數(shù)
* @param view
* @param radius
*/
@ReactProp(name = "radius")
public void setRadius(CircleView view, Integer radius) {
view.setRadius(radius);
}
可以看到@ReactProp注解有個(gè)name的key，他的value值對(duì)應(yīng)的就是Circle.js里propTypes聲明的屬性梅肤，每當(dāng)js那邊設(shè)置color屬性司蔬，這個(gè)setColor的方法就會(huì)自動(dòng)調(diào)用，這樣就把js的參數(shù)傳遞到了native
最后我們改下index.js
'use strict'
import React, { Component} from 'react';
import { AsyncStorage,NativeModules,ToastAndroid } from 'react-native';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
import Circle from './Circle';
let title = 'React Native界面';
export default class YRNTest extends Component {
/**
* Callback 通信方式
*/
callbackComm(msg) {
NativeModules.CommonModule.rnCallNativeFromCallback(msg,(result) => {
ToastAndroid.show("CallBack收到消息:" + result, ToastAndroid.SHORT);
})
}
/**
* Promise 通信方式
*/
promiseComm(msg) {
NativeModules.CommonModule.rnCallNativeFromPromise(msg).then(
(result) =>{
ToastAndroid.show("Promise收到消息:" + result, ToastAndroid.SHORT)
}
).catch((error) =>{console.log(error)});
}
render() {
return (
<View style={styles.container}>
<Circle
style={{width: 100, height: 100}}
color="#25c5f7"
radius={50}
/>
</View>
// <View style={styles.container}>
// <Text style={styles.welcome} >
// {title}
// </Text>
// <Text style={styles.welcome} onPress={this.callbackComm.bind(this,'你好啊姨蝴，android')}>
// Callback通信方式
// </Text>
// <Text style={styles.welcome} onPress={this.promiseComm.bind(this,'你好啊俊啼，android')}>
// Promise通信方式
// </Text>
// </View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('YRNTest', () => YRNTest);
添加import Circle from './Circle';
render里改為
<View style={styles.container}>
<Circle
style={{width: 100, height: 100}}
color="#25c5f7"
radius={50}
/>
</View>
