React Native(七)——react-native-elements
配合React native使用的UI库:https://react-native-training.github.io/react-native-elements/
1. 新建项目:http://www.cnblogs.com/zhengyeye/p/7567509.html(不赘述了)
2. 执行 react-native run-android 安装app在手机或者模拟机上;突然才发现RN版本升级后,项目目录结构变得更简洁了:
新版的为用户节省了很多工作,将整个逻辑代码合并在一个App.js中,省去了用户自己新建项目的必要。
安装方法:
Step 1: Install react-native-vector-icons¶ npm i react-native-vector-icons --save && react-native link react-native-vector-icons Step 2: Install react-native-elements¶ yarn add react-native-elements or npm i react-native-elements --save
使用方法(使用什么组件,便引入其就可):
import { Button } from 'react-native-elements';
部分组件——
1.button(按钮):
onPress:用法类似于RN中button的用法,这种也是定义一个函数;
export default class App extends Component<{}> {
_onPress = () => {
alert('dianji');
};
render() {
return (
<View style={styles.container}>
<Button
raised
icon={{ name: 'home', size: 32 }}
buttonStyle={{ backgroundColor: 'red', borderRadius: 10 }}
textStyle={{ textAlign: 'center' }}
onPress={this._onPress}
title={`Welcome to\nReact Native Elements`}
/>
</View>
)
}
...
2.Avatar(头像):
限制头像大小:
small medium large xlarge
rounded:默认为false(矩形),定义头像的形状,为ture则为圆形;
若想在头像中自定义图片,则有两种方法:...
icon={{name: 'rocket', color: 'orange'}} //通过icon属性设置
...
...
source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg' }}//通过类似于<Image />的source属性来定义
...
overlayContainerStyle:定义图片之外视图的颜色;
onPress:用法同button;
containerStyle:定义整个容器的外部样式,比如宽高怎样的;
3.Badge(徽章,类似于聊天中未读消息右上角的阅读数):
……
很多组件,还是需要慢慢了解的~~~
React Native(七)——react-native-elements的更多相关文章
- WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?
Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...
- Native VS React Native VS 微信小程序
随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- 七天接手react项目 系列 —— react 脚手架创建项目
其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...
- React(七)独立组件间的共享Mixins
(1)ES6的使用 (https://github.com/brigand/react-mixin) 下载依赖包 npm i react-mixin --save (2)导入react-mixin包 ...
随机推荐
- savReaderWriter 模块的使用
作用: 由于python可以辅助数据分析和数据挖掘,读取文件, 而savReaderWriter模块就是为此而设计. 官网 :http://pythonhosted.org/savReaderWrit ...
- 在命令行中运行JUnit测试
可以在Eclipse之外运行JUnit测试,使用org.junit.runner.JUnitCore类. 这个类提供了runClasses()方法,它允许运行一个或多个测试类.runClasses() ...
- 回想sql语句中的各种连接
1. 内连接(Inner Join) 内连接是最常见的一种连接,它页被称为普通连接,而E.FCodd最早称之为自然连接. 以下是ANSI SQL-92标准 select * from t_ins ...
- ckeditor4.2.1常用配置
常用的配置信息都放在根目录的config.js文件中,一些常用的配置项如下: 1.界面语言 //语言 config.language = 'zh-cn'; 2.字体添加中文 //字体 config.f ...
- 开源项目推荐:e-example / Springboot+bootstrap + ……
前言: 我想要找一个 springboot + bootstrap 的例子介绍,然后搜索到了这个开源项目. 所有能跑起来的项目都有研究价值,看看这个项目的文档.目前正好满足我想要的功能.推荐 正文: ...
- 分布式缓存系统 Memcached 整体架构
分布式缓存系统 Memcached整体架构 Memcached经验分享[架构方向] Memcached 及 Redis 架构分析和比较
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- nodejs的__dirname与__filename
__filename变量获取当前模块文件的带有完整绝对路径的文件名:[包含文件名本身的绝对路径] __dirname变量获得当前文件所在目录的完整目录名.[不包含文件名本身的绝对路径] 该方法用于获取 ...
- 让 Oracle 11g 32位运作在64位 Windows 上
并非不能运行. 本人安装版未曾尝试,但绿色版倒是运行成功了. 很简单:注册表的位置发生了变化而已! 默认(32位.64位),oracle会读取以下注册表的位置: [HKEY_LOCAL_MA ...
- BarTender数据中的转义符序列知识讲解
Datamatrix是二维码的一个成员,广泛用于商品的防伪.统筹标识.如果为 Data Matrix 条形码指定的“符号类型”不是 ECC 200,则将会启用“字符集”选项.Data Matrix 也 ...