【RN - 基础】之View使用简介

简介

　　View是一个容器，支持FlexBox布局。

　　View既可以作为容器容纳其他组件，也可以作为一个组件包含进另一个容器中。

　　无论运行在哪个平台上，View都会直接对应这个平台的原生视图，如iOS中的UIView、Android中的android.View，以及HTML中的<div>。

 

演示

　　下面是一个View的使用案例的代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View
} from 'react-native';

class MyApp extends Component {
    render() {
        return (
            <View style={{ flexDirection: 'row', height: 100, padding: 20 }}>
                <View style={{ backgroundColor: 'blue', flex: 0.5 }} />
                <View style={{ backgroundColor: 'red', flex: 0.25 }} />
                <View style={{ backgroundColor: 'green', flex: 0.25 }} />
            </View>
        );
    }
}

const styles = StyleSheet.create({});

AppRegistry.registerComponent('MyApp', () => MyApp);

　　从上面的代码中可以看到，render()函数中返回了一个View，这个View中又包含了三个子View。三个子View各有填充颜色，并且占据父View的一定比例的空间。

　　以上代码的运行效果如下图所示：

　　使用View时需要注意的地方：

　　render()函数只能返回一个View或View的子类，不能返回多个并列的View！

 

Style

Style标签	说明
borderColor	边框颜色，这边几个就是代表上下左右边框的颜色（borderTopColor，borderRightColor，borderBottomColor，borderLeftColor）
borderStyle	边框线的风格，这个和CSS样式是一样的，enum（’solid’,’dotted’,’dashed’）
opacity	设置透明度
elevation	高度，设置Z轴，可以产生立体效果
backgroundColor	颜色
borderRadius	边框圆角大小，其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius
borderWidth	边框宽度，另外四个是上下左右的边框宽度：borderTopWidth，borderLeftWidth，borderBottomWidth，borderRightWidth
overflow	设置超过容器内容显示与否