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

展示效果：

转载于:https://www.cnblogs.com/CongZhang/p/9908396.html

react-native 使用 antd-mobile-rn UI进行开发app相关推荐

【React Native】在原生和React Native间通信（RN调用原生）
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
rn在java中什么意思_[React Native Android 安利系列]RN中使用js调用java代码
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: 书接上节,我们上节说道,如何控制原生andr ...
如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
手机app开发可选技术——React Native
百度百科 React Native是Facebook于2015年开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物,支持IOS和安卓两大平台.RN ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
React Native发布重构路线图
React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应 ...
什么是 Native、Web App、Hybrid、React Native和Weex？
一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介此处App为应用,appli ...
Microsoft将在UWP上支持React Native，同时为VS Code添加工具软件
Microsoft和Facebook日前宣布React Native的下一个目标平台是Universal Windows Platform(UWP). 对于已经在多个设备平台上使用React Nati ...
移动开发者如何更好地学习 React Native？ | 技术头条
作者 | 魔笛责编 | 郭芮 2015年3月,Facebook正式发布react-native,只支持iOS平台:2015年9月,Facebook发布了React Native for Androi ...

react-native 使用 antd-mobile-rn UI进行开发app

react-native 使用 antd-mobile-rn UI进行开发app相关推荐

最新文章

热门文章