為什么

　　在React Native的編程中，我們難免遇到一些需要原生組件才能調(diào)起的行為，例如相機(jī)等。如果可以通過在原生組件和rn組件之間通信的方式來解決這個(gè)問題，一方面可以讓react native的組件獲得極大的豐富，另一方面也可以從某種程度上提高我們程序的性能。是一件有百利的事情。當(dāng)然，它的編寫會(huì)相對(duì)復(fù)雜。因此在實(shí)際使用時(shí)還是要慎重。

　　在我們最近的項(xiàng)目進(jìn)展中，出現(xiàn)了要繪制一個(gè)雷達(dá)圖的需求。調(diào)研之后發(fā)現(xiàn)在iOS上有現(xiàn)有的react-native庫可以實(shí)現(xiàn)這個(gè)功能，而且功能非常完善，基本各類圖表都可以完成。而在Android上卻只有一個(gè)Android原生庫 MPAndroid 和一個(gè)較基礎(chǔ)的MPAndroid在react native上的移植 react-native-chart-android 。這個(gè)庫當(dāng)時(shí)只支持barchart,candlechart,linechart等少數(shù)幾種圖表。沒有直接對(duì)radarchart的支持，這讓我們很憂傷，于是花了一個(gè)下午在原作者的基礎(chǔ)上增加了雷達(dá)圖的功能。謹(jǐn)以此文作為記錄。

　　Android和React的接口

　　首先來增加一個(gè)管理雷達(dá)圖的類。這個(gè)類中處理和React和信息交互。簡(jiǎn)單來說，就是用 @React.props() 這樣的裝飾器來對(duì)Android中原生的類方法、類屬性進(jìn)行封裝。以代碼為例： ` @ReactProp(name=”webLineWidthInner”,defaultFloat=0.3f)

　　public void setWebLineWidthInner(RadarChart chart,float webLineWidthInner){

　　chart.setWebLineWidthInner(webLineWidthInner);

　　chart.invalidate(); } ``` 按照官方文檔的說法，要在js中使用的屬性都需要通過以setter的形式來進(jìn)[email protected]

　　Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp (or @ReactPropGroup). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a void method and should be public. Property type sent to JS is determined automatically based alt="物聯(lián)網(wǎng)" width="550" height="846" />