查看github原文
如有錯誤請在評論區指出~

前言。。和一些關于repo起名的建議

在github上找了很多圖表類的插件，大多都是直方圖之類的顯示完好，到了餅圖都差強人意。因為react-native版本更新的快，用不同的版本必須適配不同的第三方庫，所以很多repo維護的都比較慢（或者類似于react-native-chart就直接不更新了），如果你非得用某個第三方庫，在你當前版本不適合的情況下，要么換庫，要么就降級react-native版本。這導致在開發上非常棘手，因為是團隊項目，不可能去降級react-native版本的啊，在找適合的第三方庫的過程中也是一度陷入了絕望之中。直到在react-native-chart的readme中發現了victory-native。這里，我不得不吐槽一下他的repo名，victory什么鬼啊，沒用過你家react-victory的人真心不知道你是干啥的。

這啥子命名哦！摔！錯誤的命名示例

說句題外話，如果自己有repo的小伙伴一定要重視你的項目命名，最好把它的功能用命名的方式描述出來，然后詳細寫下description，這樣才能提高star數，（來自一個剛剛參透這些道理并且寫了不少repo，star數扔為0的老阿姨的忠告）。如果你經常從github上找三方庫你就會發現，star數很高的項目基本上都是文檔詳盡，description寫的很清楚的一些項目。拿react-native-chart舉例，雖然也是個不錯的repo，但已經不能滿足當前的react-native版本了，比起victory-native還是有很多不足的地方，但是他的star數要比victory-native高一倍。起個名字還是關系著命運啊，就像王勝利和王.我會做圖表一樣，你會找誰做圖表呢。。

react-native-chart，想有star就該這樣命名

先看效果圖

demo

安裝victory-native

首先，先要安裝react-native-svg，對應你的react-native版本號進行安裝。

react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
react-native-svg >= 5.1.8 only supports react-native >= 0.44.0 and react == 16.0.0-alpha.6
react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.4.1 only supports react-native >= 0.47.0 and react == 16.0.0-alpha.12
react-native-svg >= 5.5.1 only supports react-native >= 0.50.0 and react == 16.0.0

之后link一下

react-native link react-native-svg

重新打包安裝

react-native run-ios
// or
react-native run-android

然后安裝victory-native

yarn add victory-native

使用

先引入，這里只討論餅圖，不過很多參數都是共同的，其他的見官方文檔

import {
  VictoryPie,
  VictoryLegend,
} from 'victory-native';

使用組件

<VictoryPie
            padding={{ top: 0, left: 0 }}
            colorScale={colorScale}
            data={[
              { x: '凈值', y: 35 },
              { x: '已用', y: 40 },
              { x: '可用', y: 55 },
              { x: '總盈虧', y: 55 },
            ]}
            innerRadius={px2dp(75)}
            height={256}
            width={256}
            labels={() => ''}
          />

參數

這里寫的參數只是基礎的幾個，想要進行擴展去看下官方文檔，寫的非常詳盡。

data

類似于json形式，x代表數據的類型，y是數據的值；也可以是純數組的形式。

colorScale

這個參數指每個類型的顏色，是一組數組，順序按照data中給出的順序。如：

const colorScale = ['tomato', 'orange', 'gold', 'navy'];

innerRadius

指的是圓形中間的圓半徑大小。如果設置為0就是一個純餅圖。

height,width

設置整個svg的大小，不設置默認為填充父組件。

labels

標簽名，將data進行處理后渲染到圖中。因為需求中不顯示標簽名，所以設置為()=>{}

<VictoryPie
  data={sampleData}
  labels={(d) => `y: ${d.y}`}
/>

padding

內邊距大小。這個屬性默認并不為0，所以會在分辨率不同的設備上顯示不一，建議設置為0，然后在整個組件外部包個View進行顯示。

圖例

<VictoryLegend
              padding={{ top: 0, left: 0 }}
              title=""
              orientation="vertical"
              style={{ labels: { fontSize: sizes.f2 } }}
              gutter={px2dp(25)}
              data={[
                {
                  name: '凈值',
                  symbol: { fill: 'tomato', type: 'square' },
                },
                {
                  name: '已用',
                  symbol: { fill: 'orange', type: 'square' },
                },
                {
                  name: '可用',
                  symbol: { fill: 'gold', type: 'square' },
                },
                { name: '總盈虧', symbol: { fill: 'navy', type: 'square' } },
              ]}
              width={px2dp(150)}
            />

參數

title

整個圖例的名字。如title='圖例'

data

類似于json的數據結構，包含圖例名(name)，和圖例樣式(type)以及圖例顏色(fill)。

gutter

指的是每條圖例之間的間距。

orientation

圖例的排列方式。橫排或縱排。

參考資料

1. react-native-svg repo 地址
2. victory-native repo 地址
3. victory官方文檔