为React Native定制雷达图

  为什么

  在React Native的编程中,我们难免遇到一些需要原生组件才能调起的行为,例如相机等。如果可以通过在原生组件和rn组件之间通信的方式来解决这个问题,一方面可以让react native的组件获得极大的丰富,另一方面也可以从某种程度上提高我们程序的性能。是一件有百利的事情。当然,它的编写会相对复杂。因此在实际使用时还是要慎重。

  在我们最近的项目进展中,出现了要绘制一个雷达图的需求。调研之后发现在iOS上有现有的react-native库可以实现这个功能,而且功能非常完善,基本各类图表都可以完成。而在Android上却只有一个Android原生库 MPAndroid 和一个较基础的MPAndroid在react native上的移植 react-native-chart-android 。这个库当时只支持barchart,candlechart,linechart等少数几种图表。没有直接对radarchart的支持,这让我们很忧伤,于是花了一个下午在原作者的基础上增加了雷达图的功能。谨以此文作为记录。

  Android和React的接口

  首先来增加一个管理雷达图的类。这个类中处理和React和信息交互。简单来说,就是用 @React.props() 这样的装饰器来对Android中原生的类方法、类属性进行封装。以代码为例: ` @ReactProp(name=”webLineWidthInner”,defaultFloat=0.3f)

  public void setWebLineWidthInner(RadarChart chart,float webLineWidthInner){

  chart.setWebLineWidthInner(webLineWidthInner);

  chart.invalidate(); } ``` 按照官方文档的说法,要在js中使用的属性都需要通过以setter的形式来进[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="物联网" width="550" height="846" />