FancyShare
commented
5 years ago 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 !!!
likezero
awmleer
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.
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