feat(webview): open the source prop

packages/webview/README.md

@@ -1,8 +1,8 @@
-English | [简体中文](./README_zh-CN.md)
+English | [简体中文](https://github.com/ChuHingYee/react-native-web-charts/blob/master/packages/webview/README_zh-CN.md)
 
 # @react-native-web-charts/webview
 
-the charts react-native's component base on react-native-webview(support Echarts or F2)
+the charts react-native's component base on react-native-webview
 
 ## Installation
 
@@ -16,13 +16,14 @@ npm i react-native-webview @react-native-web-charts/webview --save
 
 #### Android
 
-find the chart.html in to your node_modules/@react-native-web-charts/**/dist and copy that to android/app/src/main/assets
+if you use xxx.html for charts,you need to copy that to android/app/src/main/assets
 
 ## Example
 
 ```javascript
 import React, {useEffect, useState, useRef} from 'react';
 import {RNWebChart} from '@react-native-web-charts/webview';
+import {html} from '@react-native-web-charts/echarts';
 import {WebView} from 'react-native-webview';
 import type {WebViewMessageEvent} from 'react-native-webview';
 
@@ -88,31 +89,28 @@ const Example = () => {
       emptyText="no data"
       onLoad={webviewOnLoad}
       onMessage={handleWebViewMessage}
+      source={
+        html:html
+      }
     />
   );
 };
 export default Example;
 ```
 
-## Change Chart Dependency
-
-### Android
-
-find the chart.html in to your node_modules/@react-native-web-charts/**/dist and copy that to android/app/src/main/assets
-
-
-### IOS
-
-find the chart.html in to your node_modules/@react-native-web-charts/**/dist and copy that to node_modules/@react-native-web-charts/webview/dist
-
-
 ## Options
 
 [check out the API Reference](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)
 
+## Questions
+
+if you meet some errors when has multiple chart,you can set opacity: 0.99 in webStyle
+
 ## Thanks
 
-Thanks for [react-native-webview](https://github.com/react-native-webview/react-native-webview)
+Thanks 
+[react-native-webview](https://github.com/react-native-webview/react-native-webview)
+[native-echarts](https://github.com/somonus/react-native-echarts)
 
 ## Meta
 

packages/webview/README_zh-CN.md

@@ -1,8 +1,8 @@
-[English](./README.md) | 简体中文
+[English](https://github.com/ChuHingYee/react-native-web-charts/blob/master/packages/webview/README.md) | 简体中文
 
 # @react-native-web-charts/webview
 
-基于 react-native-webview 的可视化图表组件（支持 ECharts/f2 等前端可视化图表）。原理为利用 webview 组件的 injectedJavaScript 和 injectJavaScript 属性加载本地 html 文件。
+基于 react-native-webview 的可视化图表组件。原理为利用 webview 组件的 injectedJavaScript 和 injectJavaScript 属性加载本地 html 文件。
 
 ## 安装
 
@@ -16,13 +16,14 @@ npm i react-native-webview @react-native-web-charts/webview --save
 
 #### Android
 
-在 node_modules/@react-native-web-charts/\*\*/dist 目录找到 chart.html 文件并复制到 android/app/src/main/assets
+如果你是用xxx.html这种方式提供source的话，你需要将页面复制到 android/app/src/main/assets
 
 ## 示例
 
 ```javascript
 import React, {useEffect, useState, useRef} from 'react';
 import {RNWebChart} from '@react-native-web-charts/webview';
+import {html} from '@react-native-web-charts/echarts';
 import {WebView} from 'react-native-webview';
 import type {WebViewMessageEvent} from 'react-native-webview';
 
@@ -88,29 +89,29 @@ const Example = () => {
       emptyText="no data"
       onLoad={webviewOnLoad}
       onMessage={handleWebViewMessage}
+      source={
+        html:html
+      }
     />
   );
 };
 export default Example;
 ```
 
-## 切换可视化库
-
-### Android
-
-在 node_modules/@react-native-web-charts/\*\*/dist 找到 chart.html 并将其复制到项目根目录下 android/app/src/main/assets
-
-### IOS
-
-在 node_modules/@react-native-web-charts/\*\*/dist 找到 chart.html 并将其复制到项目根目录下 node_modules/@react-native-web-charts/webview/dist
-
 ## 参数
 
 [API 指引](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)
 
+## 问题
+
+如果存在多个图表退出页面是发生闪退，请在webStyle加入opacity: 0.99
+
 ## 感谢
 
-🙏 感谢[react-native-webview](https://github.com/react-native-webview/react-native-webview)
+🙏 感谢
+[react-native-webview](https://github.com/react-native-webview/react-native-webview)
+[native-echarts](https://github.com/somonus/react-native-echarts)
+
 
 ## 其他
 

packages/webview/build/paths.ts

@@ -2,7 +2,3 @@ import {resolve} from 'path';
 
 export const projRoot = resolve(__dirname, '..');
 export const targetRoot = resolve(projRoot, 'dist');
-export const echartsRoot = resolve(
-  projRoot,
-  'node_modules/@react-native-web-charts/echarts/dist',
-);

packages/webview/package.json

@@ -32,8 +32,6 @@
     "yargs-parser": "^21.0.0"
   },
   "dependencies": {
-    "@react-native-web-charts/echarts": "workspace:^1.0.1",
-    "@react-native-web-charts/f2": "workspace:^1.0.0",
     "react": "^17.0.2",
     "react-native": "^0.67.3",
     "react-native-webview": "^11.17.2"

packages/webview/scripts/build.ts

@@ -1,28 +1,13 @@
-import {join} from 'path';
 import {execSync as exec} from 'child_process';
-import {copyFileSync, existsSync} from 'fs';
 import chalk from 'chalk';
-import {echartsRoot, targetRoot} from '../build/paths';
+import {targetRoot} from '../build/paths';
 const {log} = console;
 
 const clean = function () {
   log(chalk`{bgCyan Cleaning Files}\n`);
   exec(`rimraf ${targetRoot}`, {stdio: 'inherit'});
 };
 
-const copyHtml = function () {
-  log(chalk`{bgCyan Copying Files}\n`);
-  const chartHtmlPath = join(echartsRoot, 'chart.html');
-  const targetName = join(targetRoot, 'chart.html');
-  const isExistEchartsHtml = existsSync(chartHtmlPath);
-  log(chartHtmlPath);
-  if (!isExistEchartsHtml) {
-    throw new RangeError('Could not find chart.html file');
-  }
-  exec('mkdir dist', {stdio: 'inherit'});
-  copyFileSync(chartHtmlPath, targetName);
-};
-
 const build = function () {
   log(chalk`{bgCyan Building Files}\n`);
   exec('cross-env NODE_ENV=production rollup -c', {
@@ -33,7 +18,6 @@ const build = function () {
 (async () => {
   try {
     clean();
-    copyHtml();
     build();
   } catch (e) {
     log(e);

packages/webview/scripts/dev.ts

@@ -1,28 +1,13 @@
-import {join} from 'path';
 import {execSync as exec} from 'child_process';
-import {copyFileSync, existsSync} from 'fs';
 import chalk from 'chalk';
-import {echartsRoot, targetRoot} from '../build/paths';
+import {targetRoot} from '../build/paths';
 const {log} = console;
 
 const clean = function () {
   log(chalk`{bgCyan Cleaning Files}\n`);
   exec(`rimraf ${targetRoot}`, {stdio: 'inherit'});
 };
 
-const copyHtml = function () {
-  log(chalk`{bgCyan Copying Files}\n`);
-  const chartHtmlPath = join(echartsRoot, 'chart.html');
-  const targetName = join(targetRoot, 'chart.html');
-  const isExistEchartsHtml = existsSync(chartHtmlPath);
-  log(chartHtmlPath);
-  if (!isExistEchartsHtml) {
-    throw new RangeError('Could not find chart.html file');
-  }
-  exec('mkdir dist', {stdio: 'inherit'});
-  copyFileSync(chartHtmlPath, targetName);
-};
-
 const build = function () {
   log(chalk`{bgCyan Building Files}\n`);
   exec('rollup -c -w', {stdio: 'inherit'});
@@ -31,7 +16,6 @@ const build = function () {
 (() => {
   try {
     clean();
-    copyHtml();
     build();
   } catch (e) {
     log(e);

packages/webview/src/components/RNWebChart.tsx

@@ -1,15 +1,12 @@
 import React, {memo, forwardRef} from 'react';
-import {Platform, View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet} from 'react-native';
 import {StyleProp, ViewStyle} from 'react-native';
 import {WebView} from 'react-native-webview';
 import type {WebViewProps} from 'react-native-webview';
 import type {Ref} from 'react';
 
 interface WebChartProps
-  extends Omit<
-    WebViewProps,
-    'javaScriptEnabled' | 'scrollEnabled' | 'source' | 'style'
-  > {
+  extends Omit<WebViewProps, 'javaScriptEnabled' | 'style'> {
   children?: JSX.Element | JSX.Element[] | string | any;
   containerStyle?: StyleProp<ViewStyle>;
   emptyText?: string;
@@ -18,21 +15,25 @@ interface WebChartProps
 }
 
 const RNWebChart = (props: WebChartProps, ref?: Ref<WebView>) => {
-  let source = Platform.select({
-    android: {uri: 'file:///android_asset/chart.html'},
-    ios: require('./chart.html'),
-  });
-  const {containerStyle, webStyle, children, isEmpty, emptyText, ...rest} =
-    props;
+  const {
+    containerStyle,
+    webStyle,
+    children,
+    isEmpty,
+    emptyText,
+    source,
+    ...rest
+  } = props;
   return (
     <View style={styles.container} {...containerStyle}>
       <WebView
-        {...rest}
+        originWhitelist={['*']}
         ref={ref}
         style={webStyle}
         javaScriptEnabled
         scrollEnabled={false}
         source={source}
+        {...rest}
       />
       {isEmpty && (
         <View style={styles.empty}>