Closed fangjuncheng closed 7 years ago
AND I found that the package in node_modules is not the same as it in github. Is there something wrong with npm package? @Infinity0106
I ran the command and paste your code in one of my projects and it works correctly and the node_module is the same in npm, you could try downloading it from git instead of npm, let me know if you could fix it
Bernardo beat me to it! I tried with the given code and WebStorm and it worked okay for iOS. I created a demo repository here if you're curious: react-native-highcharts-demo. I also compared the react-native-highcharts.js
file to the one in GitHub and they are identical.
The Default export is not declared in imported module
warning message in WebStorm is because you are importing with ES2015 module but react-native-highcharts.js
in react-native-highcharts uses CommonJS syntax module.exports = ChartWeb;
in line 123;
I'm not 100% sure on how this interop between ES2015 modules and CommonJS works but for some reason it's able to resolve it. Even when the class names are actually wrong! In the demo code for this repository it's ChartView
but in the latest version the class name is actually ChartWeb
.
This may be a material for a separate issue/PR, but is there a reason for this inconsistency? And is there a reason why CommonJS is used instead of ES2015 modules since they are natively supported by React Native?
@fangjuncheng Back to your issue. Just to make sure, do you have a "react-native-highcharts": "^1.0.0"
line in your package.json
file?
@fangjuncheng Hi again! I was playing around in a new project and I ran into a similar problem. The issue that I ran into was when the chart component had a parent component with a flex
style attribute. Then the chart rendered as empty.
@jonrh YES,you have a "react-native-highcharts": "^1.0.0" line in your package.json file. I use the component like THIS:--AND it did not work <+View style={{flex:1,...}} +> <Hcharts /+ > <View+> ---SO i should run the chart component had a parent component without a flex style attribute IF it works that use the component like THIS:? <+View style={{flex:1,...}} +> <View+><Hcharts /+ > <View+>
I tested this a bit more and it seems it's not the flex
that is causing the issue. Wrapping it in another <View>
does not help either. The problem seems to be the alignItems
style attribute on a parent component. The chart is displayed as empty when alignItems
is flex-start
, center
, or flex-end
but it works for stretch
. Source for the <Hcharts />
component.
export default class RNHighchartsDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text>Begin</Text>
<Hcharts />
<Text>End</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center', // <- this seems to cause the issue
}
});
With alignItems: 'center';
:
Without:
At the moment I'm unfortunately not sure how to fix it. In my own app I don't have alignItems
, didn't need it.
OK, Thanks!
use another device. for android , htc is better
I used “npm install react-native-highcharts --save” and Getting Start; But there is no chart show on my app,it just return blank, No ERR report;(I use WebStorm to compile the react-native project for android) And when i move the mouse on the word "ChartView",the WebStorm tell me like this:
Default export is not declared in imported module
AND THERE IS MY CODE BELOW: 'use strict';
import React, {Component} from 'react' import ChartView from 'react-native-highcharts';
export default class Hcharts extends Component { render() { var Highcharts = 'Highcharts'; var conf = { chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () {
}