React Native实战系列第四篇 — View组件

一、 JSX和组件的概念

• React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式是：

    var newBox = document.createElement('div');
    newBox.className = 'box';
    $('main').appendChild(newBox);

• 但这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：

    var root = (
          <View style={{backgroundColor:'red'}}>
                 <Text>JSX语法实现形式</Text>
         </View>
    );

• 在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖。

二、 View组件中常见的属性

• React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签，它是所有组件的父组件。

Flexbox 弹性布局
Transforms 动画属性
backfaceVisibility enum('visible', 'hidden') 定义界面翻转的时候是否可见
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 设置透明度，取值从0-1；
overflow enum('visible', 'hidden') 设置内容超出容器部分是显示还是隐藏；
elevation number 高度 设置Z轴，可产生立体效果。

三、 View组件运用

• View的基本运用：

export default class JHReactDemo extends Component {
  render() {
    return (
      <View style={{flex:1, padding:30, backgroundColor:'yellow'}}>
           <View 
              style={{width:200, height:100, backgroundColor:'red'}}>
           </View>
      </View>
    );
  }
}

• 在上面代码的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View。

• 在顶层的View中的style属性里面设置了其占满父控件，内边距为30，背景颜色为黄色 ；对应子层中的View的style属性中设置了宽度300，高度50，背景色为红色。 这是我们熟悉的css写法。

• 运行结果如下：

  
  

• 在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰、也有利于后期维护。

• 下面我们采用StyleSheet来实现一下:

export default class JHReactDemo extends Component {
  render() {
    return (
      <View style={styles.outerViewStyle}>
           <View style={styles.innerViewStyle}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  outerViewStyle: {
    flex:1, 
    padding:30, 
    backgroundColor:'red'
  },
  
  innerViewStyle: {
    width:200, 
    height:100,
    backgroundColor:'yellow'
  } 
});

• 当然，在开发中会根据具体情况来灵活运用。

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！