ReactNative Fusioncharts 事件未在 iOS 中触发
ReactNative Fusioncharts event not firing in iOS
我正在研究与 Fusioncharts 事件相关的功能,它没有按预期工作,但图表绘制和其他功能按预期工作。我在谷歌搜索时发现了以下 PR。
https://github.com/fusioncharts/react-native-fusioncharts/issues/48 但它对我不起作用。
以下是我的版本和代码:
"fusioncharts": "3.15.3",
"react-native-fusioncharts": "4.1.2",
"react-native-fs": "2.14.1",
"react-native-webview": "11.0.0"
<ReactNativeFusionCharts
ref={(ref) => {
this.refChart = ref;
}}
dataEmptyMessage=""
{...fcProps}
type={chartType}
width={this.width}
height={this.height}
dataFormat="json"
dataSource={{ ...dataSource, chart: chartData }}
libraryPath={this.libraryPath}
onInitialized={(chartApi) => {
console.log(
'onInitialized - API: ',
this.constructor.name,
this.state.fullscreenMode,
chartApi
);
if (!this.state.fullscreenMode) {
this._chartApi = chartApi;
}
}}
events={{
beforeInitialize: () => {
this.forceHideLoader();
},
initialized: () => {
console.log('initialized');
},
noDataToDisplay: () => {
console.log('noDataToDisplay');
},
dataLoadRequestCompleted: () => {
console.log('lrc');
},
dataLoadError: () => {
console.log('le');
},
dataLoadCancelled: () => {
console.log('lc');
},
beforedataload: () => {
console.log('bdl');
},
beforeDataUpdate: () => {
console.log('bdu');
},
dataUpdated: () => {
console.log('du');
},
realTimeUpdateComplete: () => {
console.log('tuc');
},
chartCleared: () => {
console.log('cc');
},
chartClick: () => {
console.log('cclk');
},
dataplotclick: (e, a) => {
Alert.alert(`You clicked on ${e.data.categoryLabel}`);
}
}}
/>
{this.renderLoader()}
</React.Fragment>```
感谢fusionchart support service和@Zapdos13的指导,才得以解决问题。希望这对愿意升级 react-native-fusioncharts
的人有所帮助
您只需按照本指南操作即可。
https://www.npmjs.com/package/react-native-fusioncharts
他们网站上的说明似乎没有更新。所以注意不要与旧版本实现混淆。
无需 运行 fc-build-assets --fc-template ./assets/fusioncharts-tpl.html --fc-library ./assets/fusioncharts
或修改 react-native-fusion: "5.0.0"
中的资产文件夹
一旦我升级以下版本的软件包,问题就解决了:
react-native-fusion: "5.0.0"
"fusioncharts": "^3.17.0"
"react-native-webview": "^11.4.4"
此外,需要安装 "react-native-unimodules": "^0.13.3"
并根据本指南进行配置 https://docs.expo.io/bare/installing-unimodules/#installation(配置后可能需要 运行 pod install
并确保必要的 unimodule已安装依赖项)
最后,添加更新您的 metro.config.js
如下:
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
},
resolver: {
sourceExts,
assetExts: [...assetExts, 'fcscript']
}
}
})()
我正在研究与 Fusioncharts 事件相关的功能,它没有按预期工作,但图表绘制和其他功能按预期工作。我在谷歌搜索时发现了以下 PR。 https://github.com/fusioncharts/react-native-fusioncharts/issues/48 但它对我不起作用。
以下是我的版本和代码:
"fusioncharts": "3.15.3",
"react-native-fusioncharts": "4.1.2",
"react-native-fs": "2.14.1",
"react-native-webview": "11.0.0"
<ReactNativeFusionCharts
ref={(ref) => {
this.refChart = ref;
}}
dataEmptyMessage=""
{...fcProps}
type={chartType}
width={this.width}
height={this.height}
dataFormat="json"
dataSource={{ ...dataSource, chart: chartData }}
libraryPath={this.libraryPath}
onInitialized={(chartApi) => {
console.log(
'onInitialized - API: ',
this.constructor.name,
this.state.fullscreenMode,
chartApi
);
if (!this.state.fullscreenMode) {
this._chartApi = chartApi;
}
}}
events={{
beforeInitialize: () => {
this.forceHideLoader();
},
initialized: () => {
console.log('initialized');
},
noDataToDisplay: () => {
console.log('noDataToDisplay');
},
dataLoadRequestCompleted: () => {
console.log('lrc');
},
dataLoadError: () => {
console.log('le');
},
dataLoadCancelled: () => {
console.log('lc');
},
beforedataload: () => {
console.log('bdl');
},
beforeDataUpdate: () => {
console.log('bdu');
},
dataUpdated: () => {
console.log('du');
},
realTimeUpdateComplete: () => {
console.log('tuc');
},
chartCleared: () => {
console.log('cc');
},
chartClick: () => {
console.log('cclk');
},
dataplotclick: (e, a) => {
Alert.alert(`You clicked on ${e.data.categoryLabel}`);
}
}}
/>
{this.renderLoader()}
</React.Fragment>```
感谢fusionchart support service和@Zapdos13的指导,才得以解决问题。希望这对愿意升级 react-native-fusioncharts
您只需按照本指南操作即可。 https://www.npmjs.com/package/react-native-fusioncharts
他们网站上的说明似乎没有更新。所以注意不要与旧版本实现混淆。
无需 运行 fc-build-assets --fc-template ./assets/fusioncharts-tpl.html --fc-library ./assets/fusioncharts
或修改 react-native-fusion: "5.0.0"
一旦我升级以下版本的软件包,问题就解决了:
react-native-fusion: "5.0.0"
"fusioncharts": "^3.17.0"
"react-native-webview": "^11.4.4"
此外,需要安装 "react-native-unimodules": "^0.13.3"
并根据本指南进行配置 https://docs.expo.io/bare/installing-unimodules/#installation(配置后可能需要 运行 pod install
并确保必要的 unimodule已安装依赖项)
最后,添加更新您的 metro.config.js
如下:
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig()
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
},
resolver: {
sourceExts,
assetExts: [...assetExts, 'fcscript']
}
}
})()