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>
    ...
  );
}