【问题标题】:ReactNative FusionChart events in iOS does not emit / fire. Only the first will emitiOS 中的 React Native FusionCharts 事件不会发出/触发。只有第一个会发出
【发布时间】:2019-10-30 17:58:49
【问题描述】:

FushionChart events 道具似乎在 react-native-fusioncharts 中无法正常工作。只有事件对象中的第一个键(键值对)会触发/发射。

在下面的示例中,console.log("bI"); 将被记录,但不会记录任何其他事件。甚至 onInitialized 都没有,因为它依赖于 renderComplete 事件。

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

更新

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

更新 2

检查this blog中的点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-native:0.59.4
react-native-webview:5.8.1
fusioncharts:3.13.5
react-native-fusioncharts:3.0.0

【问题讨论】:

    标签: javascript reactjs react-native fusioncharts react-native-webview


    【解决方案1】:

    你可以直接在里面绑定FusionCharts事件来反应原生的fusioncharts指令看看这个sn-p-

    <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

    【讨论】:

    • 这就是我通过它的方式@zapdos13。而且我的代码在 Android 上运行良好,但在 iOS 上却不行。
    猜你喜欢
    • 2021-06-15
    • 1970-01-01
    • 2021-07-31
    • 2022-12-28
    • 1970-01-01
    • 1970-01-01
    • 2013-07-28
    • 2020-07-03
    • 1970-01-01
    相关资源
    最近更新 更多