React-Native 之 View使用

前言

• 学习本系列内容须要具有必定 HTML 开发基础，没有基础的朋友能够先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并非特别长，因此对其中的内容和性质了解可能会有所误差，在学习中若是有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章初版出自简书，若是出现图片或页面显示问题，烦请转至 简书 查看 也但愿喜欢的朋友能够点赞，谢谢

JSX 和 组件 的概念

---

• React的核心机制之一就是虚拟DOM（能够在内存中建立的虚拟DOM元素）React利用虚拟DOM来减小对实际DOM的操做从而提高性能。传统的建立方式以下：

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

• 上面的代码在可读性方面比较很差，因此 React 开发了 JSX，利用咱们熟悉的 HTML 语法来建立虚拟 DOM,建立方式以下：

  <div className="box">
      </div>

• 在实际开发中，JSX在产品打包阶段已经编译成纯 JavaScript, JSX的语法不会带来任何性能影响。因此，JSX能够当作是比较高级但依然直观的语法糖

View 组件中常见的属性

---

• React Native 组件 View,其做用等同于iOS中的 UIView,Android中的 android.view 或者网页中的
  标签，它是全部组件的父组件，也能够说全部组件继承了它的全部属性
• 这边就将它常见的属性罗列出来：
  • Flexbox：弹性布局（Flexbox的介绍能够点我）
  • Transforms：动画属性
  • backfaceVisibility('visible', 'hidden')：定义界面翻转的时候是否可见
  • backgroundColor：背景颜色
    
    
    

  // 背景颜色
      backgroundColor:'red'

  效果：
  

  • borderBottomColor：底部边框颜色
    
    
    

  // 底部边框宽度
      borderBottomWidth:5,
      // 底部边框颜色
      borderBottomColor:'green'

  效果：
  
  • borderBottomLeftRadius：底部左边边框圆角
    
    
    

  // 底部边框左圆角
      borderBottomLeftRadius:5

  效果：
  
  • borderBottomRightRadius：
    
    
    

  // 底部边框右圆角
      borderBottomRightRadius:5

  效果：
  
  • borderBottomWidth：底部边框宽度
    
    
    

  // 底部边框宽度
      borderBottomWidth:5

  效果：
  
  • borderColor：边框颜色
    
    
    

  // 全体边框宽度
      borderWidth:5,
      // 全体边框颜色
      borderColor:'yellow'

  效果：
  
  • borderLeftColor：左边框颜色
    
    
    

  // 左边边框颜色
      borderLeftColor:'black'

  效果：
  
  • borderLeftWidth：左边边框宽度
    
    
    

  // 左边边框宽度
      borderLeftWidth:10

  效果：
  
  • borderRadius：边框圆角
    
    
    

  // 全体边框宽度
      borderWidth:5,
      // 全体边框颜色
      borderColor:'black',
      // 全体边框圆角
      borderRadius:3

  效果：
  
  • borderRightColor：右边边框颜色
    
    
    

  // 右边框颜色
      borderRightColor:'yellow'

  效果：
  
  • borderRightWidth：右边边框宽度
    
    
    

  // 右边框宽度
      borderRightWidth:10

  效果：
  
  • borderStyle('solid', 'dotted', 'dashed')：边框风格
    • solid
      
      
      

    // 边框风格
        borderStyle:'solid'

    效果：
    
    • dotted
      
      
      

    // 边框风格
        borderStyle:'dotted'

    效果：
    
    • dashed
      
      
      

    // 边框风格
        borderStyle:'dashed'

    效果：
    

  • borderTopColor：顶部边框颜色（参考上面）

  • borderTopWidth：顶部边框宽度（参考上面）

  • borderTopLeftRadius：顶部左边圆角（参考上面）

  • borderTopRightRadius：顶部右边圆角（参考上面）

  • borderWidth：边框宽度
    
    
    

  // 全体边框宽度
      borderWidth:5

  效果：
  
  • opacity：设置透明度，取值从 0~1
    
    
    

  // 透明度
      opacity:0.5

  效果：
  

  • overflow('visible', 'hidden')：设置内容超出容器部分是否显示（之后的文章讲解）

  • elevation：高度，设置Z轴，可产生立体效果（之后文章讲解）

View 组件使用

---

• 简单使用

render() {
    return (
      <View style={styles.container}>
          <View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}>

          </View>
      </View>
    );
  }

• 上面代码是咱们熟悉的 CSS 写法
  效果：
  

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

• 咱们将上面的样式经过 StyleSheet 方式来实现
  • 视图部分
    
    
    

  var test = React.createClass({
          render() {
              return (
                  <View style={styles.container}>
                      <View style={styles.viewStyle}>
  
                      </View>
                  </View>
              );
          }
      });

  • 样式部分
    
    
    

  var styles = StyleSheet.create({
          container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5FCFF',
          },
  
          viewStyle: {
              // 尺寸
              width:300,
              height:100,
              // 背景颜色
              backgroundColor:'red',
              // 边框宽度
              borderWidth:1,
              // 边框颜色
              borderColor:'black'
          }
  
      });

View 在开发中是常常会接触到的组件，灵活运用它能够帮助咱们更好地结构化代码，甚至更方便的布局