import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-navigation';
import { navigationBarStyle } from '../../modules/consts';
import Navigator from '../../modules/navigator';
import RNEChartsPro from 'react-native-echarts-pro';
import PluginStrings from '../../modules/i18n';
export default class InnerAutoActRec extends React.Component {
constructor(props) {
super(props);
this.echartsRef = React.createRef();
}
state = {
chartOpts: {
backgroundColor: '#fff',
color: ['#1890FF', '#DA12AA'],
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
},
data: ['x1', 'x2', 'x3']
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
grid: {
right: '5%',
top: '15%',
bottom: '15%'
},
tooltip: {
trigger: 'axis',
enterable: true,
showContent: false
},
series: [
{
name: PluginStrings['change_point_angle_hori'],
data: [1, 2, 3],
type: 'line',
showSymbol: false,
smooth: true
},
{
name: PluginStrings['change_point_angle_vert'],
data: [3, 2, 1],
type: 'line',
showSymbol: false,
smooth: true
}
]
},
chartVisible: false
};
componentDidMount() {}
componentWillUnmount() {}
/**
* @description: 设置导航栏
*/
updateNavigationState = () => {
this.props.navigation.setParams(navigationBarStyle);
};
render() {
return (
<View style={[Styles.container]}>
<SafeAreaView style={{ width: '100%', flex: 0, backgroundColor: '#fff' }}>
<Navigator navigation={this.props.navigation} />
</SafeAreaView>
<View style={[Styles.containerInner]}>
<TouchableOpacity
onPress={() => {
this.setState({ chartVisible: !this.state.chartVisible });
}}
>
<Text>切换显示</Text>
</TouchableOpacity>
{this.state.chartVisible && (
<RNEChartsPro
ref={this.echartsRef}
option={this.state.chartOpts}
height={300}
eventActions={{
showTip: e => {
console.log('e :>> ', e);
}
}}
/>
)}
</View>
</View>
);
}
}
const Styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-evenly',
alignItems: 'center'
},
containerInner: {
flex: 1,
width: '100%',
alignItems: 'center',
padding: 10
}
});
报错信息：
