载入组件， 打包app启动会自动闪退

[dong960010]

故障描述： 载入组件， 打包app启动会自动闪退

• react-native-charts-pro 【1.9.0】
• react-native 【0.71.6】
• react-native-swiper 【1.6.0】
• Platform 【android】
• Demo

  
  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

[supervons]

从代码来看，这里可能需要做一下判空处理：

const service = this.props.info.service;
let records = JSON.parse(this.props.info.records);

records.map 也需要判断该对象是否为 null。

处理后运行界面是可以正常渲染：

另外，能否提供下闪退日志，以便快速定位是否是组件问题。