react-native 使用 antd-mobile-rn UI進行開發app
阿新 • • 發佈:2018-11-05
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', } });