Closed dong960010 closed 11 months ago
故障描述: 载入组件, 打包app启动会自动闪退
import React, { PureComponent } from 'react'; import {StyleSheet, View, Text, Image} from 'react-native'; import ECharts from 'react-native-echarts-pro';
class ChartView extends PureComponent { state = { startColor: '#F3FA20', endColor: '#F7B90E', htmlString: '' }; componentDidMount() {
} render() { const service = this.props.info.service; let records = JSON.parse(this.props.info.records); const date = []; const record = []; records.map(item => { date.push(item.date.substring(5, 10).split('-').join('.')); record.push(item.count) }); const option = { grid: { width: '95%', height: 114, top: '8%', left: '2%', right: '5%', bottom: '0%', containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景 }, title: { right: 15, text: '近30天服务顾客趋势', textStyle: { fontSize: 9, color: '#36C6EA' } }, xAxis: { type: 'category', boundaryGap: false, // 设置x轴两边的留白 axisTick: { // x轴刻度尺 show: false }, axisLabel: { margin: 12, fontSize:7, // 文字的字体大小 color: '4B84B0' // 刻度标签文字的颜色 }, axisLine: { // x轴线条颜色 lineStyle: { color: '#999' } }, data: date }, yAxis: { type: 'value', axisLabel: { margin: 12, fontSize: 7, // 文字的字体大小 color: '#4B84B0' // 刻度标签文字的颜色 }, axisTick: { show: false // 是否显示坐标轴刻度 默认显示 }, splitLine: { // 网格线 show: false // 关闭网格线 }, axisLine: { // y轴线条颜色 show: true, lineStyle: { color: '#999' } } }, series: [ { data: record, type: 'line', smooth: true, // 面积图改成弧形状 lineStyle: { width: 1.5, // 外边线宽度 color: '#00FFD5' // 外边线颜色 }, showSymbol: false, // 去除面积图节点圆 areaStyle: { // 区域填充渐变颜色 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 1, color: 'rgba(7, 59, 69, 0)' // 0% 处的颜色 }, { offset: 0, color: 'rgba(35, 238, 221, 1)' // 100% 处的颜色 } ] } } } ] }; if (!Object.keys(this.props).length) return ; return ( <View style={{flex: 1}}> <View style={{height: 80, paddingTop: 6.5, paddingLeft: 30, position: 'relative'}}> <Image source={{ uri: `${service}` }} style={styles.serviceBg} /> <Text style={{fontSize: 12, fontWeight: 'bold', color: '#fff'}}>今日服务顾客<Text style={{fontSize: 9}}>(人次)</Text></Text> </View> <View style={{justifyContent: 'center' }}> <ECharts option={option} /> </View> </View> ) }
}
const styles = StyleSheet.create({ serviceBg: { position: 'absolute', top: 0, left: 0, width: 463, height: 80, }, textStyle: { fontSize: 40, }, text: { fontSize: 20, color: "#abe333" }, });
export default ChartView
从代码来看,这里可能需要做一下判空处理:
const service = this.props.info.service; let records = JSON.parse(this.props.info.records);
records.map 也需要判断该对象是否为 null。
records.map
null
处理后运行界面是可以正常渲染:
另外,能否提供下闪退日志,以便快速定位是否是组件问题。
故障描述: 载入组件, 打包app启动会自动闪退
class ChartView extends PureComponent { state = { startColor: '#F3FA20', endColor: '#F7B90E', htmlString: '' }; componentDidMount() {
}
const styles = StyleSheet.create({ serviceBg: { position: 'absolute', top: 0, left: 0, width: 463, height: 80, }, textStyle: { fontSize: 40, }, text: { fontSize: 20, color: "#abe333" }, });
export default ChartView