1. 程式人生 > >react-native 使用 antd-mobile-rn UI進行開發app

react-native 使用 antd-mobile-rn UI進行開發app

1、建立 react-native 專案

react-native init app03

2、安裝元件

npm install antd-mobile-rn --save

3、配置按需載入

npm install babel-plugin-import --save-dev

// .babelrc 檔案中增加下面程式碼
"plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile-rn"
      }
    ]
]

4、使用 antd-mobile-rn 元件進行開發

import React, {Component} from 'react';

// 匯入元件
import { Button } from 'antd-mobile-rn';


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>

          // 使用元件
          <Button type='primary'>按鈕</Button>
      </View>
    );
  }
}

const styles 
= StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } });