Skip to content

载入插件后,app启动闪退 #195

@ghost

Description

故障描述: 载入组件, 打包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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions