React Native引入ant design

React Native中使用ant design

一、安裝和初始化

需要在命令行中安裝相應(yīng)工具,并且需要安裝安裝 yarn

npm install -g yarn
npm install -g create-react-app  # web 項(xiàng)目
npm install -g create-react-native-app  # react-native 項(xiàng)目


二、創(chuàng)建項(xiàng)目

create-react-app antm-demo  # web 項(xiàng)目
create-react-native-app antm-demo  # react-native 項(xiàng)目

啟動(dòng)項(xiàng)目

yarn start

運(yùn)行項(xiàng)目

yarn run android

三、引入 antd-mobile

yarn add antd-mobile
yarn add babel-plugin-import --dev

四、修改某些配置

1、修改 .babelrc 配置,并重新啟動(dòng)服務(wù)

{
  "presets": ["babel-preset-expo"],
  "plugins": [["import", { "libraryName": "antd-mobile" }]],
  "env": {
    ...
  }
}

2、修改 App.js, 引入 antd-mobile 按鈕組件。

...
import { Button } from 'antd-mobile';

...
render() {
  return (
    ...
    <Button>antd-mobile button</Button>
    ...
  );
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容