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> }

        


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM