Ant-design-mobile: self-built server demos does not work on Android 4.4 react-native-webview, showing a white screen.

[FancyShare]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/ant-design/ant-design-mobile/blob/master/components/carousel/demo/basic.md

Steps to reproduce

(All the ant mobile components has the same problem, not only carousel !)
I copied these code from basic.md, and paste into my new react.js project called "antm-demo". Then I run the antm-demo: http://192.168.3.96:3000

What is expected?

The system version of Smartisan T1 and Honor 6 are both Android 4.4.x
I wish react-native-webview of my RN app, or Android system browser of Smartisan T1 and Honor 6 can visit http://192.168.3.96:3000/ correctly, just like Honor 7x or PC Chrome browser they're working fine.

What is actually happening?

But it shows a blank screen there, especially happens in the react-native-webview which embedded in my ReactNative0.58.6 demo app. Then I installed Chrome Browser into Honor 6. It works! but system browser and my webview still have the problem.

| Environment | Info |
|---|---|
| antd | 2.2.6 |
| React | react 16.8.3 |
| System | Android 4.4 SmartisanT1 or Honor 6 |
| Browser | the react-native-webview embedded in my ReactNative0.58.6 app; or the Android System Browser |

---

It's weird that the bug doesn't happen, when I use Android4.4 webview to visit official online demo: https://antd-mobile.gitee.io/kitchen-sink/components/carousel?lang=zh-CN#carousel-demo-0
The kitchen-sink carousel demos online displayed correctly in my react-native-webview on the Android4.4. What magic did you play on it?

But the animation behave very very slowly in Android4.4(Smartisan T1 and Honor 6), since carousel from cube-UI or amaze-UI works very fast in Android4.4(Smartisan T1 and Honor 6). I think this is another bug about performance.

https://antd-mobile.gitee.io/kitchen-sink/components/carousel?lang=zh-CN#carousel-demo-0
http://amazeui.org/widgets/slider/c3/0
https://didi.github.io/cube-ui/example/#/slide/horizontal

[FancyShare]

This is my React code. AccordionDemo have the same problem.

【index.js】
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AccordionDemo from './AccordionDemo';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<AccordionDemo />, document.getElementById('root'));
serviceWorker.unregister();

【AccordionDemo.js】
import React, { Component } from 'react';
import { Accordion, List } from 'antd-mobile';
class AccordionDemo extends Component {
　onChange = (key) => {
　　console.log(key);
　}
　render() {
　　return (
　　　<div style={{ marginTop: 10, marginBottom: 10 }}>
　　　　<Accordion accordion openAnimation={{}} className="accordion-demo" onChange={this.onChange}>
　　　　　<Accordion.Panel header="Title 1">
　　　　　　<List className="my-list">
　　　　　　　<List.Item>content 1</List.Item>
　　　　　　　<List.Item>content 2</List.Item>
　　　　　　　<List.Item>content 3</List.Item>
　　　　　　</List>
　　　　　</Accordion.Panel>
　　　　　<Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
　　　　　<Accordion.Panel header="Title 3" className="pad">
　　　　　　text text text text text text text text text text text text text text text
　　　　　</Accordion.Panel>
　　　　</Accordion>
　　　</div>
　　);
　}
}
export default AccordionDemo;

【AccordionDemo.css】
.accordion-demo .pad .am-accordion-content-box {
　padding: 10px;
}

【package.json】
{
"name": "antm-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd-mobile": "^2.2.9",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5"
},
"homepage": ".",
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"plugins": [
["import", { "libraryName": "antd-mobile", "style": "css" }]
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"amazeui-touch": "^2.0.0-alpha.1",
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"react-app-rewired": "^2.1.0",
"react-transition-group": "^2.6.0"
}
}

【config-overrides.js】
const {
addLessLoader,
fixBabelImports,
override
} = require("customize-cra");
module.exports = {
webpack: override(
addLessLoader({
javascriptEnabled: true
}),
fixBabelImports("babel-plugin-import", {
libraryName: "antd-mobile",
style: true
})
)
};
!!! There must be something wrong with the package.json or config-overrides.js !!!

[FancyShare]

你奶奶的，我直接新建工程，完全照搬旧版本示例代码：
antd-mobile-samples/create-react-app/package.json（"antd-mobile": "^2.0.0", "react": "^15.6.1",）
antd-mobile-samples/create-react-app/config-overrides.js
然后：
npm i
npm start
问题完美解决！

看来紧盯最新版本尝鲜就是要付出代价的啊啊啊啊。
而且那些粗心程序员，不像我这么纠缠细节的话，如果只拿新手机Honor 7x (Android 8.x)去测试WebView。他们或许还以为一切正常着呢，哼哼

[likezero]

rn版本的？