一键修复 react-native-echarts 各种小问题

最近的一个项目,使用了 React Native。在使用之前感觉无限美好的 React Native,真正到开发时 可谓是 大坑一个接一个。经过近一个月的多月的循环采坑+百度,App基本总算是完成了。

虽然 Facebook 为 react-native 做了很多,但还是有无数的需求无法解决,好在还有海量的大神分享,有github,啥都不怕。

其中一个常用的 somonus 大神的 react-native-echarts,可以使用 react-native 调用 百度的 Echarts,啥图表都能实现。不过还有一点小小的不足:1、背景色非白色时,加载前会显示一个白屏幕;2、安卓正式版打包后,图表不显示。somonus 不仅解决了 图表的问题,也为 遇到 奇葩的、小众的需求,找不到库时 提供了一个解决思路。

有问题不怕,作为面向百度编程的神级程序员,通过高深的搜索技术,很快就找到了解决方案。

1、背景色非白色时,加载前会显示一个白屏幕,这个非常好解决,给WebView加个透明背景色( rgba(0, 0, 0, 0) )就可以了。

2、安卓正式版打包后,图表不显示,WebView的source 改为 {‘uri’:’file:///android_asset/echarts/tpl.html’} ,并复制 tpl.html 目录就可以了。

因为是团队开发,使用了 svn,不可能将 node_modules 都上传到 版本服务器(为啥?随便引用几个包,node_modules 文件数就过万了…,更新引用的包后更恐怖,每次都提交几百个文件)。

编写了一个批处理脚本,让脚本自动复制可创建对应的文件,这样有新同事加入本项目时,首次运行这个脚本就可以了。

所有代码已经整理好,发布到了github。https://github.com/mqycn/react-native-echarts-fix

为了避免和其他项目冲突,复制 的 tpl 路径为:android_asset/echarts/tpl.html

图表加载时的白屏问题

使用了 和 Echart 一样的定义接口。传入 option时,设置 backgroundColor 即可

如果不指定 option.backgroundColor,则背景为透明

  // code...
  getInitialState(){
    return {
      echart: {
        backgroundColor: 'red'	//设置初始背景色
      }
    };
  },
  // code...
  render(){
    return (
      <View>
        <Echarts option={this.state.echart} />
      </View>
    );
  },
  // code...

**使用说明**

现在只支持 Windows 下的自动修复

需要将本工具安装到 您的 APP 根目录,然后运行 react-native-echarts-fix/fix-it.cmd

YouApp/
   |---- android/
   |---- ios/
   |---- node_modules/
   |---- react-native-echarts-fix/
   |        |---- react-native-echarts-fix/native-echarts/
   |        |---- react-native-echarts-fix/fix-it.cmd
   |---- index.android.js
   |---- index.ios.js
   |---- package.json

本文参考:debug正常,但是release还是不显示
最后再重复下,工具直接到 GitHub下载就可以。https://github.com/mqycn/react-native-echarts-fix

发表评论

电子邮件地址不会被公开。 必填项已用*标注