# expo-react-native-victory

> 本库为 expo 和 react native 项目提供Victory用于实现图标功能，增加了对react-native-web的支持。

Latest version **1.0.0** (published 2024-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install expo-react-native-victory
pnpm add expo-react-native-victory
yarn add expo-react-native-victory
bun add expo-react-native-victory
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-01-04 |
| First published | 2024-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zeng-zhiming |
| Maintainers | zeng-zhiming |
| Keywords | victory, victory-native, react-native, react, expo, ios, android |

## Links

- npm: https://www.npmjs.com/package/expo-react-native-victory
- Repository: https://github.com/zeng-zhiming/expo-react-native-victory
- Homepage: https://github.com/zeng-zhiming/expo-react-native-victory#readme
- Issues: https://github.com/zeng-zhiming/expo-react-native-victory/issues
- npm.io page: https://npm.io/package/expo-react-native-victory

## Dependencies (1)

- [victory-native](https://npm.io/package/victory-native.md) ~36.7.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2024-01-04

## README

# 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
```javascript

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Platform,
} from 'react-native';

import { VictoryPie } from 'expo-react-native-victory';

class TestPage extends Component {

    // 构造函数
    constructor(props, context) {
        super(props, context);

        this.state = {};
    }

    onPress = () => {
        alert('点击按钮');
    };

    render() {

        const dataList = [
            { x: '1', y: 1, label: "Title1" },
            { x: '2', y: 1, label: "Title2" },
            { x: '3', y: 1, label: "Title3" },
            { x: '4', y: 1, label: "Title4" },
            { x: '5', y: 1, label: "Title5" },
            { x: '6', y: 1, label: "Title6" },
            { x: '7', y: 1, label: "Title7" },
            { x: '8', y: 1, label: "Title8" },
            { x: '9', y: 1, label: "Title9" },
            { x: '10', y: 1, label: "Title10" },
        ];

        return (
            <SafeAreaView style={{flex: 1}}>
                <View style={styles.container}>
                    <TouchableOpacity onPress={this.onPress}>
                        <Text>点击按钮</Text>
                    </TouchableOpacity>
                    <View>
                        <VictoryPie
                            data={dataList}
                            labelRadius={({ innerRadius }) => 90 }
                            style={{ labels: { fill: "white", fontSize: 12} }}
                            innerRadius={80}
                            padAngle={({ datum }) => 1}
                            labelPlacement={() => "parallel"}
                            events={[
                                {
                                    // childName: 'all',	// 可选all或者子组件的name
                                    target: 'data',     // 可选parent、data、labels
                                    eventHandlers: Platform.OS ==="web" ? { // 适配Web点击事件
                                        onClick: (event,conf, index) => {	// 支持的事件都行，注意移动端和web端的不同就行

                                            console.log('onPress===>',dataList[index]);

                                            return [
                                                {
                                                    target: "data",
                                                    mutation: ({ style }) => {
                                                        return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
                                                    }
                                                }, {
                                                    target: "labels",
                                                    mutation: ({ text }) => {
                                                        return text === "clicked" ? null : { text: "clicked" };
                                                    }
                                                }
                                            ];
                                        },
                                    } : {
                                        onPress: (event,conf, index) => {	// 支持的事件都行，注意移动端和web端的不同就行

                                            console.log('onPress===>',dataList[index]);

                                            return [
                                                {
                                                    target: "data",
                                                    mutation: ({ style }) => {
                                                        return style.fill === "#c43a31" ? null : { style: { fill: "#c43a31" } };
                                                    }
                                                }, {
                                                    target: "labels",
                                                    mutation: ({ text }) => {
                                                        return text === "clicked" ? null : { text: "clicked" };
                                                    }
                                                }
                                            ];
                                        },
                                    },
                                },
                            ]}
                        />
                    </View>
                </View>
            </SafeAreaView>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
});


export default TestPage;
```

---
_Source: https://npm.io/package/expo-react-native-victory · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._