expo-react-native-victory

本库是在victory-native库上进行扩展，为 expo 和 react native 项目提供Victory用于实现图标功能，增加了对react-native-web的支持。

安装

$ npx expo install expo-react-native-victory 或

$ yarn add expo-react-native-victory

或

$ npm install expo-react-native-victory --save

Usage

1
2import React, {Component} from 'react';
3import {
4    SafeAreaView,
5    StyleSheet,
6    Text,
7    View,
8    TouchableOpacity,
9    Platform,
10} from 'react-native';
11
12import { VictoryPie } from 'expo-react-native-victory';
13
14class TestPage extends Component {
15
16    // 构造函数
17    constructor(props, context) {
18        super(props, context);
19
20        this.state = {};
21    }
22
23    onPress = () => {
24        alert('点击按钮');
25    };
26
27    render() {
28
29        const dataList = [
30            { x: '1', y: 1, label: "Title1" },
31            { x: '2', y: 1, label: "Title2" },
32            { x: '3', y: 1, label: "Title3" },
33            { x: '4', y: 1, label: "Title4" },
34            { x: '5', y: 1, label: "Title5" },
35            { x: '6', y: 1, label: "Title6" },
36            { x: '7', y: 1, label: "Title7" },
37            { x: '8', y: 1, label: "Title8" },
38            { x: '9', y: 1, label: "Title9" },
39            { x: '10', y: 1, label: "Title10" },
40        ];
41
42        return (
43            <SafeAreaView style={{flex: 1}}>
44                <View style={styles.container}>
45                    <TouchableOpacity onPress={this.onPress}>
46                        <Text>点击按钮</Text>
47                    </TouchableOpacity>
48                    <View>
49                        <VictoryPie
50                            data={dataList}
51                            labelRadius={({ innerRadius }) => 90 }
52                            style={{ labels: { fill: "white", fontSize: 12} }}
53                            innerRadius={80}
54                            padAngle={({ datum }) => 1}
55                            labelPlacement={() => "parallel"}
56                            events={[
57                                {
58                                    // childName: 'all',	// 可选all或者子组件的name
59                                    target: 'data',     // 可选parent、data、labels
60                                    eventHandlers: Platform.OS ==="web" ? { // 适配Web点击事件
61                                        onClick: (event,conf, index) => {	// 支持的事件都行，注意移动端和web端的不同就行
62
63                                            console.log('onPress===>',dataList[index]);
64
65                                            return [
66                                                {
67                                                    target: "data",
68                                                    mutation: ({ style }) => {
69                                                        return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
70                                                    }
71                                                }, {
72                                                    target: "labels",
73                                                    mutation: ({ text }) => {
74                                                        return text === "clicked" ? null : { text: "clicked" };
75                                                    }
76                                                }
77                                            ];
78                                        },
79                                    } : {
80                                        onPress: (event,conf, index) => {	// 支持的事件都行，注意移动端和web端的不同就行
81
82                                            console.log('onPress===>',dataList[index]);
83
84                                            return [
85                                                {
86                                                    target: "data",
87                                                    mutation: ({ style }) => {
88                                                        return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
89                                                    }
90                                                }, {
91                                                    target: "labels",
92                                                    mutation: ({ text }) => {
93                                                        return text === "clicked" ? null : { text: "clicked" };
94                                                    }
95                                                }
96                                            ];
97                                        },
98                                    },
99                                },
100                            ]}
101                        />
102                    </View>
103                </View>
104            </SafeAreaView>
105        );
106    }
107}
108
109
110const styles = StyleSheet.create({
111    container: {
112        height: '100%',
113        justifyContent: 'center',
114        alignItems: 'center',
115    },
116});
117
118
119export default TestPage;