最近在学习react-native和QT

react-native 原生开发1 UI开发

NULL jackton 357℃ 0评论

1、编写UI管理器,如果没有特殊要求,直接继承SimpleViewManager

    

package cn.mandata.react_native_mpchart;

import android.graphics.Color;

import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.charts.BarLineChartBase;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.components.YAxis.AxisDependency;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.DataSet;
import com.github.mikephil.charting.formatter.XAxisValueFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.utils.ViewPortHandler;

import java.util.ArrayList;
import java.util.Random;

/**
 * Created by Administrator on 2015/11/6.
 */
public class MPBarLineChartManager extends SimpleViewManager<BarLineChartBase> {
 private String CLASS_NAME="MPBarLineChart";
 private Random random;//用于产生随机数

private BarChart chart;
 private BarData data;
 private BarDataSet dataSet;

@Override
 public String getName() {
 return this.CLASS_NAME;
 }

@Override
 protected BarLineChartBase createViewInstance(ThemedReactContext reactContext) {
 BarChart chart=new BarChart(reactContext);
 new MPChartSelectionEventListener(chart);
 return chart;
 }
 @ReactProp(name="touchEnabled",defaultBoolean = true)
 public void setTouchEnabled(BarLineChartBase chart,boolean enable){
 chart.setTouchEnabled(enable);
 }
 @ReactProp(name="dragEnabled",defaultBoolean = true)
 public void setDragEnabled(BarLineChartBase chart,boolean enable){
 chart.setDragEnabled(enable);
 }
 @ReactProp(name="scaleEnabled",defaultBoolean = true)
 public void setScaleEnabled(BarLineChartBase chart,boolean enable){
 chart.setScaleEnabled(enable);
 }
 @ReactProp(name="scaleXEnabled",defaultBoolean = true)
 public void setScaleXEnabled(BarLineChartBase chart,boolean enable){
 chart.setScaleXEnabled(enable);
 }
 @ReactProp(name="scaleYEnabled",defaultBoolean = true)
 public void setScaleYEnabled(BarLineChartBase chart,boolean enable){
 chart.setScaleYEnabled(enable);
 }
 @ReactProp(name="pinchZoom",defaultBoolean = true)
 public void setPinchZoom(BarLineChartBase chart,boolean enable){
 chart.setPinchZoom(enable);
 }

@ReactProp(name="doubleTapToZoomEnabled",defaultBoolean = true)
 public void setDoubleTapToZoomEnabled(BarLineChartBase chart,boolean enable){
 chart.setDoubleTapToZoomEnabled(enable);
 }

@ReactProp(name="highlightPerDragEnabled",defaultBoolean = true)
 public void setHighlightPerDragEnabled(BarLineChartBase chart,boolean enable){
 chart.setHighlightPerDragEnabled(enable);
 }
 @ReactProp(name="highlightPerTapEnabled",defaultBoolean = true)
 public void setHighlightPerTapEnabled(BarLineChartBase chart,boolean enable){
 chart.setHighlightPerTapEnabled(enable);
 }
 @ReactProp(name="dragDecelerationEnabled",defaultBoolean = true)
 public void setDragDecelerationEnabled(BarLineChartBase chart,boolean enable){
 chart.setDragDecelerationEnabled(enable);
 }

@ReactProp(name="dragDecelerationFrictionCoef",defaultFloat = 0.50f)
 public void setDragDecelerationFrictionCoef(BarLineChartBase chart,float v){
 chart.setDragDecelerationFrictionCoef(v);
 }
 @ReactProp(name="maxVisibleValueCount",defaultInt = 50)
 public void setMaxVisibleValueCount(BarLineChartBase chart,int v){
 chart.setMaxVisibleValueCount(v);
 }
 //{x:{LineColor:"",LineWidth:"",TextColor:"",TextSize:""},y:{}}
 @ReactProp(name="limitLine")
 public void setLimitLine(BarLineChartBase chart,ReadableMap v){
 if(v.getMap("x")!=null){
 setAxisLimit(chart.getXAxis(), v.getMap("x"));
 }
 if(v.getMap("y")!=null){
 if(chart.getAxisLeft()!=null) {
 setAxisLimit(chart.getAxisLeft(), v.getMap("y"));
 }
 else if(chart.getAxisRight()!=null){
 setAxisLimit(chart.getAxisRight(), v.getMap("y"));
 }
 }
 }
 private void setAxisLimit(AxisBase axis,ReadableMap x){
 String xLabel=x.getString("Label");
 float xLimit=(float)x.getDouble("Limit");
 String xLineColor=x.getString("LineColor");
 String xTextColor=x.getString("TextColor");
 float xTextSize=(float)x.getDouble("TextSize");
 float LineWidth=(float)x.getDouble("LineWidth");

LimitLine ll = new LimitLine(xLimit, xLabel);
 ll.setLineColor(Color.parseColor(xLineColor));
 ll.setLineWidth(LineWidth);
 ll.setTextColor(Color.parseColor(xTextColor));
 ll.setTextSize(xTextSize);
 axis.addLimitLine(ll);
 }
 //{x:{},y:{}}
 @ReactProp(name="xAxis")
 public void setXAxis(BarLineChartBase chart,ReadableMap v){
 XAxis x= chart.getXAxis();
 setAxisInfo(x, v);
 setXAxisInfo(x, v);
 }
 @ReactProp(name="yAxisLeft")
 public void setYAxisLeft(BarLineChartBase chart,ReadableMap v){
 AxisBase x= chart.getAxisLeft();
 setAxisInfo(x,v);
 setYAxisInfo((YAxis) x, v);
 }
 @ReactProp(name="yAxisRight")
 public void setYAxisRight(BarLineChartBase chart,ReadableMap v){
 AxisBase x= chart.getAxisRight();
 setAxisInfo(x,v);
 setYAxisInfo((YAxis) x, v);
 }
 private void setAxisInfo(AxisBase axis,ReadableMap v){
 if(v.hasKey("enable")) axis.setEnabled(v.getBoolean("enable"));
 if(v.hasKey("drawAxisLine")) axis.setDrawAxisLine(v.getBoolean("drawAxisLine"));

if(v.hasKey("drawGridLines")) axis.setDrawGridLines(v.getBoolean("drawGridLines"));
 if(v.hasKey("drawLabels")) axis.setDrawLabels(v.getBoolean("drawLabels"));

if(v.hasKey("textColor")) axis.setTextColor(Color.parseColor(v.getString("textColor")));
 if(v.hasKey("textSize")) axis.setTextSize((float)v.getDouble("textSize"));
 if(v.hasKey("gridColor")) axis.setGridColor(Color.parseColor(v.getString("gridColor")));

if(v.hasKey("gridLineWidth")) axis.setGridLineWidth((float)v.getDouble("gridLineWidth"));
 if(v.hasKey("axisLineColor")) axis.setAxisLineColor(Color.parseColor(v.getString("axisLineColor")));
 if(v.hasKey("axisLineWidth")) axis.setAxisLineWidth((float)(v.getDouble("axisLineWidth")));
 if(v.hasKey("gridDashedLine")) {
 ReadableMap gdl=v.getMap("gridDashedLine");
 axis.enableGridDashedLine((float)gdl.getDouble("lineLength"),
 (float)gdl.getDouble("spaceLength"),
 (float)gdl.getDouble("phase"));
 }
 if (v.hasKey("xOffset")) {
 axis.setXOffset((float)(v.getDouble("xOffset")));
 }
 if (v.hasKey("yOffset")) {
 axis.setYOffset((float)(v.getDouble("yOffset")));
 }
 }
 private void setXAxisInfo(XAxis axis,ReadableMap v){

if(v.hasKey("labelRotationAngle")) axis.setLabelRotationAngle((float) v.getDouble("labelRotationAngle"));
 if(v.hasKey("spaceBetweenLabels")) axis.setSpaceBetweenLabels(v.getInt("spaceBetweenLabels"));
 if(v.hasKey("labelsToSkip")) axis.setLabelsToSkip(v.getInt("labelsToSkip"));
 if(v.hasKey("avoidFirstLastClipping")) axis.setAvoidFirstLastClipping(v.getBoolean("avoidFirstLastClipping"));
 if(v.hasKey("position")) {
 String name=v.getString("position");
 axis.setPosition(XAxis.XAxisPosition.valueOf(name));
 }

// if(v.hasKey("valueFormatter"))
// axis.setValueFormatter(new XAxisValueFormatter() {
// @Override
// public String getXValue(String s, int i, ViewPortHandler viewPortHandler) {
// return String.format(s);
// }
// });
 }
 private void setYAxisInfo(YAxis axis,ReadableMap v){
 if(v.hasKey("startAtZero")) axis.setStartAtZero(v.getBoolean("startAtZero"));
 if(v.hasKey("axisMaxValue")) axis.setAxisMaxValue((float) v.getDouble("axisMaxValue"));

if(v.hasKey("axisMinValue")) axis.setAxisMinValue((float) v.getDouble("axisMinValue"));
 if(v.hasKey("inverted")) axis.setInverted(v.getBoolean("inverted"));

if(v.hasKey("spaceTop")) axis.setSpaceTop((float) (v.getDouble("spaceTop")));
 if(v.hasKey("spaceBottom")) axis.setSpaceBottom((float) (v.getDouble("spaceBottom")));

if(v.hasKey("showOnlyMinMax")) axis.setShowOnlyMinMax(v.getBoolean("showOnlyMinMax"));
 if(v.hasKey("labelCount")) {
 boolean labelCountForce = false;
 if (v.hasKey("labelCountForce")) {
 labelCountForce = v.getBoolean("labelCountForce");
 }
 axis.setLabelCount(v.getInt("labelCount"), labelCountForce);
 }

if(v.hasKey("position")) {
 String name=v.getString("position");
 axis.setPosition(YAxis.YAxisLabelPosition.valueOf(name));
 }

if(v.hasKey("valueFormatter"))
 axis.setValueFormatter(new CustomYAxisValueFormatter(v.getString("valueFormatter")) );
 }

//{EnableLeft:true,EnableRight:true}
 @ReactProp(name="yAxis")
 public void setYAxis(BarLineChartBase chart,ReadableMap v){
 YAxis x= chart.getAxisLeft();
 setAxisInfo(x,v);
 setYAxisInfo(x,v);
 }
 @ReactProp(name="description")
 public void setDescription(BarLineChartBase chart,String v){
 chart.setDescription(v);
 }
 @ReactProp(name="backgroundColor")
 public void setBackgroundColor(BarLineChartBase chart,String v){
 chart.setBackgroundColor(Color.parseColor(v));
 }
 @ReactProp(name="drawGridBackground")
 public void setDrawGridBackground(BarLineChartBase chart,boolean v){
 chart.setDrawGridBackground(v);
 }
 @ReactProp(name="borderColor")
 public void setBorderColor(BarLineChartBase chart,String v){
 chart.setBorderColor(Color.parseColor(v));
 }
 @ReactProp(name="borderWidth")
 public void setBorderWidth(BarLineChartBase chart,double v){
 chart.setBorderWidth((float) v);
 }
 @ReactProp(name="gridBackgroundColor")
 public void setGridBackgroundColor(BarLineChartBase chart,String v){
 chart.setGridBackgroundColor(Color.parseColor(v));
 }
 @ReactProp(name="visibleXRange")
 public void setVisibleXRange(BarLineChartBase chart,ReadableArray v){
 chart.setVisibleXRange((float) v.getDouble(0), (float) v.getDouble(1));

}
 @ReactProp(name="chartPadding")
 public void setPadding(BarLineChartBase chart,String v){
 String[] padding=v.split(" ");
 if(padding.length==1){
 int pad=(Integer.parseInt(padding[0]));
 chart.setPadding(pad,pad,pad,pad);
 }else if(padding.length==2){
 int pad1=(Integer.parseInt(padding[0]));
 int pad2=(Integer.parseInt(padding[1]));
 chart.setPadding(pad2,pad1,pad2,pad1);
 }else if(padding.length==4){
 int pad1=(Integer.parseInt(padding[0]));
 int pad2=(Integer.parseInt(padding[1]));
 int pad3=(Integer.parseInt(padding[2]));
 int pad4=(Integer.parseInt(padding[3]));
 chart.setPadding(pad4,pad1,pad2,pad3);
 }
 }
 @ReactProp(name="extraOffsets")
 public void setExtraOffsets(BarLineChartBase chart, String v){
 String[] offsets = v.split(" ");
 if (offsets.length == 1) {
 int offset = (Integer.parseInt(offsets[0]));
 chart.setExtraOffsets(offset, offset, offset, offset);
 } else if(offsets.length == 2) {
 int offset1=(Integer.parseInt(offsets[0]));
 int offset2=(Integer.parseInt(offsets[1]));
 chart.setExtraOffsets(offset2, offset1, offset2, offset1);
 } else if(offsets.length == 4) {
 int offset1 = (Integer.parseInt(offsets[0]));
 int offset2 = (Integer.parseInt(offsets[1]));
 int offset3 = (Integer.parseInt(offsets[2]));
 int offset4 = (Integer.parseInt(offsets[3]));
 chart.setExtraOffsets(offset4, offset1, offset2, offset3);
 }
 }
 @ReactProp(name="legend")
 public void setLegend(BarLineChartBase chart,ReadableMap v){
 Legend legend=chart.getLegend();
 if(v.hasKey("enable")) legend.setEnabled(v.getBoolean("enable"));
 if(v.hasKey("position")) legend.setPosition(Legend.LegendPosition.valueOf(v.getString("position")));
 if(v.hasKey("direction")) legend.setDirection(Legend.LegendDirection.valueOf(v.getString("direction")));

if(v.hasKey("legendForm")) legend.setForm(Legend.LegendForm.valueOf(v.getString("legendForm")));
 if(v.hasKey("wordWrap")) legend.setWordWrapEnabled(v.getBoolean("wordWrap"));

if(v.hasKey("textColor")) legend.setTextColor(Color.parseColor(v.getString("textColor")));
 if(v.hasKey("textSize")) legend.setTextSize((float) v.getDouble("textSize"));
 if(v.hasKey("xOffset")) legend.setXOffset((float) v.getDouble("xOffset"));
 if(v.hasKey("yOffset")) legend.setYOffset((float) v.getDouble("yOffset"));
 if(v.hasKey("xEntrySpace")) legend.setXEntrySpace((float) v.getDouble("xEntrySpace"));
 if(v.hasKey("yEntrySpace")) legend.setYEntrySpace((float) v.getDouble("yEntrySpace"));

if(v.hasKey("custom")){
 ReadableMap custom=v.getMap("custom");
 ReadableArray colors=custom.getArray("colors");
 ReadableArray labels=custom.getArray("labels");
 if(colors.size()==labels.size()) {
 int[] cols = new int[colors.size()];
 String[] labs = new String[colors.size()];
 for (int j = 0; j < colors.size(); j++) {
 cols[j] = Color.parseColor(colors.getString(j));
 labs[j] = labels.getString(j);
 }
 legend.setCustom(cols,labs);
 }
 }
 }

@ReactProp(name="fitScreen")
 public void setLegend(BarLineChartBase chart,boolean v){
 if(v)chart.fitScreen();
 }

@ReactProp(name="zoomTo")//js里面的props
 public void setZoomTo(BarLineChartBase chart, ReadableMap v) {
 AxisDependency axisDependency = AxisDependency.LEFT;
 if(v.hasKey("axisDependency")) {
 if (v.getString("axisDependency").equalsIgnoreCase("RIGHT")) {
 axisDependency = AxisDependency.RIGHT;
 }
 }
 chart.zoom((long)v.getDouble("scaleX"), (long)v.getDouble("scaleY"), (long)v.getDouble("xValue"), (long)v.getDouble("yValue"), axisDependency);
 }

@ReactProp(name="viewCenter")
 public void setViewCenter(BarLineChartBase chart, ReadableArray v){
 chart.centerViewTo(v.getInt(0), (float) v.getDouble(1), AxisDependency.LEFT);
 }
}

2、packagemanager

    @Override
 public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
 return Arrays.<ViewManager>asList(
 new MPBarLineChartManager(),
 );
 }

3、编写js控件

 

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

class BarLineChart extends Component {
 constructor(props) {
 super(props);
 }

render() {
 return (
 <MPBarLineChart{...this.props}/>
 );
 }
}

BarLineChart.propTypes = {
 ...View.propTypes,
 data:PropTypes.object,
 touchEnabled:PropTypes.bool,
 dragEnabled:PropTypes.bool,
 scaleEnabled:PropTypes.bool,
 scaleXEnabled:PropTypes.bool,
 scaleYEnabled:PropTypes.bool,
 pinchZoom:PropTypes.bool,
 doubleTapToZoomEnabled:PropTypes.bool,
 highlightPerDragEnabled:PropTypes.bool,
 highlightPerTapEnabled:PropTypes.bool,
 dragDecelerationEnabled:PropTypes.bool,
 dragDecelerationFrictionCoef:PropTypes.number,
 maxVisibleValueCount:PropTypes.number,
 limitLine:PropTypes.object,
 description:PropTypes.string,
 backgroundColor:PropTypes.string,
 drawGridBackground:PropTypes.bool,
 gridBackgroundColor:PropTypes.string,
 visibleXRange:PropTypes.array,
 borderColor:PropTypes.string,
 borderWidth:PropTypes.number,
 xAxis:PropTypes.object,
 yAxisLeft:PropTypes.object,
 yAxisRight:PropTypes.object,
 yAxis:PropTypes.object,
 fitScreen:PropTypes.bool,
 chartPadding:PropTypes.string,
 legend:PropTypes.object,
 scaleX: PropTypes.number,
 scaleY: PropTypes.number,
 translateX: PropTypes.number,
 translateY: PropTypes.number,
 rotation: PropTypes.number, 
 renderToHardwareTextureAndroid: React.PropTypes.bool,
 onLayout: React.PropTypes.bool,
 accessibilityLiveRegion: React.PropTypes.string,
 accessibilityComponentType: React.PropTypes.string,
 importantForAccessibility: React.PropTypes.string,
 accessibilityLabel: React.PropTypes.string,
 testID: React.PropTypes.string,
 viewCenter: React.PropTypes.array,
 zoomTo: PropTypes.object,
 extraOffsets: PropTypes.string
 }

var MPBarLineChart= requireNativeComponent('MPBarLineChart', BarLineChart);//跟原生java里面的getname对应

export default BarLineChart;

4、直接调用js组件BarLineChart即可

转载请注明:Coding » react-native 原生开发1 UI开发

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址