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

    展示效果:

  • 相关阅读:
    jmeter参数化关联
    电商
    mysql联查
    购物车
    冒泡排序、二分查找、选择排序、斐波那契
    python数据转换/9*9表/for循环
    python三角形
    mysql语句
    Selenium 8
    Selenium 7
  • 原文地址:https://www.cnblogs.com/CongZhang/p/9908396.html
Copyright © 2020-2023  润新知