首先在工程当中安装npm install antd-mobile --save
安装完后在.babelrc文件中加入
{ "presets": ["react-native"], // "plugins": [ // [ // "import", // {"style": "css" , "libraryName": "antd-mobile" } // ] // ], "plugins": [ ["import", { "libraryName": "antd-mobile" }] // 与 Web 平台的区别是不需要设置 style ] }
之后在组件至今进行引用使用antd-mobile
这篇文章的重点当然是这里了。就是自定义antd-mobile的组件样式解决方案
RN 单个组件自定义部分样式：
- 查看对应要更改的组件下面的样式文件，eg: button/style/index.tsx
- 在自己的项目目录创建样式文件，eg: custom-button/index.tsx
- 在 custom-button/index.tsx 书写样式, eg:
import ButtonStyle from ‘antd-mobile/lib/button/style/index.native‘;
export default {
...ButtonStyle,
primaryHighlight: {
// your custom style here
}
}
- 在使用页面中给组件传入
styles属性，eg: /path/to/your/file/index.js
import { Button } from ‘antd-mobile‘;
import CustomStyles from ‘./custom-button/index‘;
...
render() {
....
<Button styles={CustomStyles}>Custom Button</Button>
}