zoukankan      html  css  js  c++  java
  • 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 组件进行开发

    App.js

    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',
      }
    });

    展示效果:

  • 相关阅读:
    Windows Phone 7 电话本相关的操作
    Windows CE 下判断 URL 地址是否有效
    cigarettes
    开灯问题
    日期计算
    小学生算术
    另一种阶乘问题
    鸡兔同笼
    笨小熊
    6174问题
  • 原文地址:https://www.cnblogs.com/CongZhang/p/9908396.html
Copyright © 2011-2022 走看看