react-native-chart-kit 的 onDataPointClick 在 Web 上不起作用。适用于安卓

Question

我在expo项目中使用react原生图表套件来绘制数据。

我在DataPointClick上设置了如下，Expo小吃在这里演示了错误：https://snack.expo.dev/@warm_tape/react本地图表试剂盒测试

<LineChart
...
onDataPointClick={(data) => {
console.log('Data point clicked');
}}
/>

Click已成功登录到android中的控制台。网络上什么也没发生。不确定问题出在哪里？

问题演示的完整app.js：

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
console.log('Test');
export default function App() {
return (
<View>
<Text>Bezier Line Chart</Text>
<LineChart
data={{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100
]
}
]
}}
width={Dimensions.get("window").width} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
onDataPointClick={data => {
console.log(data, 'data');
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

我正在使用babel进行react原生web，这对我很有用。

使用babel插件重命名jsx属性包：https://www.npmjs.com/package/babel-plugin-rename-jsx-attribute

在babel.config.js 中

plugins: [
["rename-jsx-attribute", {
"attributes": {
"onPress": "onClick"
}
}]
],