0

FushionChartevents道具似乎无法在react-native-fusioncharts. 只有事件对象中的第一个键（键值对）会触发/发射。

在下面的示例中，console.log("bI");将记录，但不会记录任何其他事件。甚至onInitialized因为它取决于renderComplete事件。

但是如果我们注释掉beforeInitialize事件，下一个事件就会起作用，依此类推。 只有当我们不发送道具或传递空对象onInitialized时，事件才会起作用。events

更新

仅在 iOS 中出现，在 Android 中运行良好。

更新 2

检查此博客中的第 2 点，在“3.onMessage/postMessage”下。

问题是在 iOS 中进行连续的 window.postMessage 调用将导致您的第一次调用丢失，因为每次在传递消息之前都会覆盖 url，因此最后一次调用会获胜


方案 1

// myChart.js
...
import ReactNativeFusionCharts from "react-native-fusioncharts";


const _libraryPath = Platform.select({
    android: { uri: "file:///android_asset/fusioncharts.html" },
    ios: require("./../../../assets/fusioncharts.html")
});

export default class MyChart extends PureComponent {
    refChart = null;
    _chartApi = null;

    render() {
        return (
            <ReactNativeFusionCharts
                ref={(ref) => {
                    this.refChart = ref;
                }}
                .... // <-- Add necessary props
                libraryPath={_libraryPath}

                onInitialized={(chartApi) => {
                    console.log("onInitialized - API");    // <-- Not emitting
                    this._chartApi = chartApi;
                }}
                events={{
                    beforeInitialize: () => {
                        console.log("bI");     // <-- Will emit
                    },
                    initialized: () => {
                        console.log("i");    // <-- Not emitting
                    },
                    chartClick: () => {
                         console.log("cclk");    // <-- Not emitting
                    }
                }}
            />
        );
    }

}

方案 2

// myChart.js
...
render() {
    return (
        <ReactNativeFusionCharts
            ref={(ref) => {
                this.refChart = ref;
            }}
            .... // <-- Add necessary props
            libraryPath={_libraryPath}

            onInitialized={(chartApi) => {
                console.log("onInitialized - API");    // <-- Not emitting
                this._chartApi = chartApi;
            }}
            events={{
                // beforeInitialize: () => {
                //     console.log("bI");
                // },
                // initialized: () => {
                //     console.log("i");
                // },
                chartClick: () => {
                     console.log("cclk");    // <-- Will emit
                }
            }}
        />
    );
}
...

版本：：
react-native0.59.4
react-native-webview：5.8.1
fusioncharts：3.13.5
react-native-fusioncharts：3.0.0

4

1 回答 1

0

您可以直接绑定 FusionCharts 事件中的反应原生 fusioncharts 指令看看这个片段 -

<FusionCharts
            type={this.state.type}
            width={this.state.width}
            height={this.state.height}
            dataFormat={this.state.dataFormat}
            dataSource={this.state.dataSource}
            events={this.state.events}
            libraryPath={this.libraryPath} // set the libraryPath property
          />

有关更多详细信息，请查看此链接 - https://github.com/fusioncharts/react-native-fusioncharts#working-with-events

于 2019-06-18T16:40:17.793 回答