React Native - 视图（View）组件的用法（附：实现一个单元格菜单）

作者：hangge | 2017-01-21 08:10

在使用 HTML 进行 Web 开发时，最重要的一个页面元素便是 div 了，可以说 div 就是整个页面布局的基础。其通常作为容器元素存在。

而在 React Native 中，也有一个类似于 div 的组件，那就是 View 组件。本文通过一个样例演示 View 组件的使用。

一、View组件属性介绍

View 组件是 React Native 最基本的组件。绝大部分其他 React Native 组件都继承了 View 组件的属性，包括支持 View 组件的样式设置、回调函数及其他属性。

1，颜色与边框

（1）backgroundColor：指定组件的背景颜色。

如果没有指定，默认背景为一种非常浅的灰色。
只有 Text 与 TextInput 组件会继承其父组件的背景颜色，而其他组件都需要设置自己的背景颜色。

（2）Opacity：定义 View 组件的透明度。

取值范围是 0~1。0 表示组件完全透明，1 表示完全不透明。

（3）borderStyle：设置边框的风格。

solid：实线边框（默认）
dotted：点状边框
dashed：虚线边框

（4）borderColor、borderTopColor、borderRightColor、borderBottomColor、borderLeftColor：定义边框颜色。

（5）borderRadius、borderTopRadius、borderRightRadius、borderBottomRadius、borderLeftRadius：定义圆角边框

附：实现一个圆形的View

如果一个 View 的宽、高相等，值都为 X。那么将 borderRadius 的值设为 X/2 时，这个 View 在显示上会是一个圆。

这种效果不仅可以在 View 上实现，也可以在 Image 组件上实现。

2，阴影与其他视觉效果

（1）阴影相关的样式

shadowColor：阴影颜色
shadowOffset：阴影位移值
shadowOpacity：阴影透明度
shadowRadius：阴影圆角率

（2）overflow：用于设置当 View 组件中的子组件宽高超出 View 组件宽高时的行为。

取值为：visible 和 hidden。默认为 hidden，即隐藏超出部分。

这个只对 iOS 平台有效。在 Android 平台上即使被设为 visible，显示的特性仍然是 hidden。

（3）backfaceVisibility：该设置与 UI 动画效果有关，可选值为：visible 和 hidden。

（4）elevation：这个是 Android 特有的样式。它是数值类型的样式键，通过在组件周围渲染阴影，让用户产生一种组件浮现在手机屏幕上的视觉效果。

block1: {
  width: 120,
  height: 120,
  backgroundColor: 'orange',
  borderRadius: 25,
},
block2: {
  width: 120,
  height: 120,
  backgroundColor: 'orange',
  borderRadius: 25,
  elevation: 50,
},

二、实现一个单元格菜单

1，效果图

这里实现一个类似于九宫格的单元格菜单。
整个菜单最外层 View 高度固定，宽度自适应（左右各留 5pt 边距）。其内部布局方式为横向布局。
最外侧 View 内部又包含三个子 View 组件，由于它们的 flex 值都是 1，所以这 3 个 View 宽度分别占 1/3。
中间和右侧这两个 View 内部又各自包含两个 View 组件。这两个 View 的 flex 同样为 1，从而垂直平分外层 View 组件的高度。

2，最细线条的绘制

从上面的样例图可以发现，单元格是使用1像素的内边框。这是由于引入了 RixelRatio API，通过 PixelRatio 的 get 方法可以获取到高清设备的像素比。我们使用 1/PixelRatio.get() 就可以获得最小线框。

3，完整代码

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

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
        <View style={styles.container}>
          <View style={[styles.item, styles.center]}>
            <Text style={styles.font}>编程社区</Text>
          </View>
          <View style={[styles.item, styles.lineLeftRight]}>
            <View style={[styles.center, styles.flex, styles.lineCenter]}>
              <Text style={styles.font}>Swift</Text>
            </View>
            <View style={[styles.center, styles.flex]}>
              <Text style={styles.font}>React</Text>
            </View>
          </View>
          <View style={styles.item}>
            <View style={[styles.center, styles.flex, styles.lineCenter]}>
              <Text style={styles.font}>HTML5</Text>
            </View>
            <View style={[styles.center, styles.flex]}>
              <Text style={styles.font}>Cordova</Text>
            </View>
          </View>
        </View>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     marginTop:25,
     marginLeft:5,
     marginRight:5,
     height:84,
     flexDirection:'row',
     borderRadius:5,
     padding:2,
     backgroundColor:'#2D9900'
   },
   item: {
     flex: 1,
     height: 80,
   },
   center:{
     justifyContent:'center', /*垂直居中，即flexDirection方向居中*/
     alignItems:'center' /*水平居中*/
   },
   flex:{
     flex:1
   },
   font:{
     color:'#FFFFFF',
     fontSize:16,
     fontWeight:'bold'
   },
   lineLeftRight:{
     borderLeftWidth:1/PixelRatio.get(),
     borderRightWidth:1/PixelRatio.get(),
     borderColor:'#FFFFFF'
   },
   lineCenter:{
     borderBottomWidth:1/PixelRatio.get(),
     borderColor:'#FFFFFF'
   },
 });

 AppRegistry.registerComponent('HelloWorld', () => Main);

React / React Native