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 或者网页中的

  标签，它是所有组件的父组件，也可以说所有组件继承了它的所有属性

• 这边就将它常见的属性罗列出来：

      // 背景颜色
      backgroundColor:'red'

  效果：