相关文章
React Native探索系列
React Native组件系列
前言
了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。
1.概述
View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。
View组件是一个支持Flexbox布局、样式、一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图,比如Android的View以及iOS的UIView。
由于View组件的属性非常多,这里主要介绍一些常用的属性。
2.style属性
style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。
2.1 Flexbox
View组件的Flexbox属性这里就不再介绍了,详细请看React Native探索(四)Flexbox布局详解这一篇文章。正是因为View组件提供了Flexbox属性,因此,继承了View组件的其他组件也都具有Flexbox属性。
2.2 shadow相关 (iOS)
View组件提供了四种阴影属性如下表:
样式名 | 参数属性 | 说明 |
---|---|---|
shadowColor | color | 设置阴影颜色 |
shadowOffset | {width: number, height: number} | 设置阴影位移值 |
shadowOpacity | number | 设置阴影透明度 |
shadowRadius | number | 设置阴影模糊半径 |
设置View组件的阴影属性并没有什么意义,在View组件中定义这些样式是为了让继承它的组件去各自实现这些效果,比如Text组件。需要注意的是只有iOS平台能使用shadow属性。
2.3 elevation (Android)
elevation取值为number。Android平台没有shadow来设置阴影,但是,可以用elevation属性来间接的设置阴影。它使用Android原生的 elevation API来设置组件的高度,这样就会在界面上呈现出阴影的效果,此属性仅支持Android 5.0及以上版本。
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View} from 'react-native';
class ViewApp extends Component {
render() {
return (
<View style={
{flex: 1, justifyContent: 'center',
alignItems:'