react-native 使用antd-mobile的使用

Posted hehedaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native 使用antd-mobile的使用相关的知识,希望对你有一定的参考价值。

首先在工程当中安装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 单个组件自定义部分样式:

  1. 查看对应要更改的组件下面的样式文件,eg: button/style/index.tsx
  2. 在自己的项目目录创建样式文件,eg: custom-button/index.tsx
  3. 在 custom-button/index.tsx 书写样式, eg:
import ButtonStyle from ‘antd-mobile/lib/button/style/index.native‘;
export default {
    ...ButtonStyle,
   primaryHighlight: {
       // your custom style here
   }
}
  1. 在使用页面中给组件传入 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>
}

        

以上是关于react-native 使用antd-mobile的使用的主要内容,如果未能解决你的问题,请参考以下文章

react-native实践(基于antd-mobile)

初次使用antd-mobile开发时踩的坑

react + antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

组件库 antd-mobile 的使用

组件库 antd-mobile 的使用

antd-mobile的下拉刷新上拉加载使用