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

展示效果:

react-native 使用 antd-mobile-rn UI进行开发app的更多相关文章

  1. 关于React Native项目在android上UI性能调试实践

    我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...

  2. 【React Native】在原生和React Native间通信(RN调用原生)

    一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...

  3. React全家桶+AntD 共享单车后台管理系统开发

    第1章 课程导学对课程整体进行介绍,并且说明学习的必要性.第2章 React基础知识React基础知识以及生命周期的介绍,并使用React官方脚手架初始化基础项目,同时介绍了新一代打包工具Yarn.第 ...

  4. react native for Android (make you first android app)

    第一步:如果你的电脑安装了node,恭喜你,第一步完成:如果没有,那请先安装node. 第二步:安装react-native-cli,在windows下需要从github签下来的react-nativ ...

  5. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  6. windows安装React Native开发运行环境

    React Native是什么 React Native是facebook开源的一个用于开发app的框架.React Native的设计理念:既拥有Native (原生) 的用户体验.又保留React ...

  7. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  8. [RN] 01 - Init: Try a little bit of React Native

    Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...

  9. 携程React Native实践

    React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...

随机推荐

  1. Linux服务器安全登录设置

    在日常运维工作中,对加固服务器的安全设置是一个机器重要的环境.比较推荐的做法是:1)严格限制ssh登陆(参考:Linux系统下的ssh使用(依据个人经验总结)):     修改ssh默认监听端口    ...

  2. vi 替换操作

    举例一: ,$s/// 从第一行到最后一行 147都替换为150 举例二: 例:替换当前文件中所有old为new :%s/old/new/g #%表示替换说有行,g表示替换一行中所有匹配点. 举例三: ...

  3. lodash 数组裁剪 drop

    _.drop(array, [n=1]) 裁剪数组中的前 N 个数组,返回剩余的部分. <!DOCTYPE html> <html lang="zh"> & ...

  4. Singleton单例模式是最简单的设计模式,它的主要作用是保证在程序执行生命周期中,使用了单类模式的类仅仅能有一个实例对象存在。

                                                                                                        ...

  5. spring mvc controller中的异常封装

    http://abc08010051.iteye.com/blog/2031992 一直以来都在用spring mvc做mvc框架,我使用的不是基于注解的,还是使用的基于xml的,在controlle ...

  6. jmeter压测-负载配置

    jmeter 压测 一般压测的时间是10-15分钟 TPS:服务端每秒钟处理的请求数  越大越好 响应时间 :越短越好 并发用户数  也就是多少并发 指标给你:tps要达到多少 响应时间要达到多少 并 ...

  7. Delphi 与 C/C++ 数据类型对照表(最新的tokyo)

    更新,下面这table为最新的tokyo基本数据类型与C++的对照关系: Delphi to C++ types mapping   Go Up to Support for Delphi Data ...

  8. java消息中间件之ActiveMQ初识

    目录 消息中间件简介 解耦合和异步 可靠性和高效性 JMS P2P Pub/Sub AMQP JMS和AMQP对比 常见消息中间件 ActiveMQ RabbitMQ Kafka 综合比较 标签(空格 ...

  9. python socket编程(socket)

    代码如下: server端: import sockets=socket.socket(socket.AF_INET,socket.SOCK_STREAM)host=socket.gethostnam ...

  10. 【ubantu】在Ubuntu上安装tar.gz,tar.bz以及deb文件(例:libreoffice安装)

    参考文章: https://blog.csdn.net/zhuquan945/article/details/52986712 ==================================== ...