chart.js
import ReactHighcharts from 'react-highcharts';
export default class Pie extends React.Component {
render() {
let config={
title:{text:'browser'},
series: [{
type: 'pie',
name: 'SLICE',
data: [
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
};
return <ReactHighcharts config={config} ref="chart"></ReactHighcharts>;
}
}
index.android.js
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
import Chart from './chart.js';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Chart style={styles.welcome} />
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: 'red',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
手机运行报错 Expected a compoment class ,got div
chart.js 如果用在电脑浏览器里就能正常显示
请问一个问题,reacthighcharts怎么响应式布局啊