<h2>前言</h2>    <ul>     <li> <p>学习本系列内容需要具备一定 HTML 开发基础。</p> </li>     <li> <p>本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢</p> </li>    </ul>    <h2>JSX 和 组件 的概念</h2>    <ul>     <li> <p>React的核心机制之一就是虚拟DOM（可以在内存中创建的虚拟DOM元素）React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式如下：</p> <pre>  <code class="language-javascript">var newBox = document.createElement('div');      newBox.className = 'box';      $('main').appendChild(newBox);</code></pre> </li>     <li> <p>上面的代码在可读性方面比较不好，所以 React 开发了 JSX，利用我们熟悉的 HTML 语法来创建虚拟 DOM,创建方式如下：</p> <pre>  <code class="language-javascript"><div className="box">      </div></code></pre> </li>     <li> <p>在实际开发中，JSX在产品打包阶段已经编译成纯 JavaScript, JSX的语法不会带来任何性能影响。所以，JSX可以看成是比较高级但依然直观的语法糖</p> </li>    </ul>    <h2>View 组件中常见的属性</h2>    <ul>     <li> <p>React Native 组件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者网页中的</p> <p>标签，它是所有组件的父组件，也可以说所有组件继承了它的所有属性</p> </li>     <li style="text-align:center">这边就将它常见的属性罗列出来：      <ul>       <li>Flexbox：弹性布局</li>       <li>Transforms：动画属性</li>       <li>backfaceVisibility('visible', 'hidden')：定义界面翻转的时候是否可见</li>       <li>backgroundColor：背景颜色</li>      </ul> <pre>  <code class="language-javascript">// 背景颜色      backgroundColor:'red'</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/abc45cdb3d823fb6f3e3691a399d4a6f.png">      <ul>       <li>borderBottomColor：底部边框颜色</li>      </ul> <pre>  <code class="language-javascript">// 底部边框宽度      borderBottomWidth:5,      // 底部边框颜色      borderBottomColor:'green'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/dc308dc481bb067d6fe165c95544ed6b.png">      <ul>       <li>borderBottomLeftRadius：底部左边边框圆角</li>      </ul> <pre>  <code class="language-javascript">// 底部边框左圆角      borderBottomLeftRadius:5</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/c37f2fa891e98a564db827424c998598.png">      <ul>       <li>borderBottomRightRadius：</li>      </ul> <pre>  <code class="language-javascript">// 底部边框右圆角      borderBottomRightRadius:5</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/e3c4ff4d02c7694c7867c398b6791463.png">      <ul>       <li>borderBottomWidth：底部边框宽度</li>      </ul> <pre>  <code class="language-javascript">// 底部边框宽度      borderBottomWidth:5</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/dc308dc481bb067d6fe165c95544ed6b.png">      <ul>       <li>borderColor：边框颜色</li>      </ul> <pre>  <code class="language-javascript">// 全体边框宽度      borderWidth:5,      // 全体边框颜色      borderColor:'yellow'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/000b4ea2e1a8c38c547547e73bdd2f6f.png">      <ul>       <li>borderLeftColor：左边框颜色</li>      </ul> <pre>  <code class="language-javascript">// 左边边框颜色      borderLeftColor:'black'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/908a71537a7f2b184ea09d2eb2896516.png">      <ul>       <li>borderLeftWidth：左边边框宽度</li>      </ul> <pre>  <code class="language-javascript">// 左边边框宽度      borderLeftWidth:10</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/43a5a0ad7ae9b78b3caa9f354c3f9b61.png">      <ul>       <li>borderRadius：边框圆角</li>      </ul> <pre>  <code class="language-javascript">// 全体边框宽度      borderWidth:5,      // 全体边框颜色      borderColor:'black',      // 全体边框圆角      borderRadius:3</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/dfbd9c74959ae5761466a60ace5b1ae5.png">      <ul>       <li>borderRightColor：右边边框颜色</li>      </ul> <pre>  <code class="language-javascript">// 右边框颜色      borderRightColor:'yellow'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/ecf4ffe9b0f899d7998b58658aabdd44.png">      <ul>       <li>borderRightWidth：右边边框宽度</li>      </ul> <pre>  <code class="language-javascript">// 右边框宽度      borderRightWidth:10</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/d10b271b4b4be2cd40f7a5dbb22953be.png">      <ul>       <li>borderStyle('solid', 'dotted', 'dashed')：边框风格 <pre>  <code class="language-javascript">// 边框风格      borderStyle:'solid'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/c6f79e9167e2c69cbd4e4f9783139d73.png"> <pre>  <code class="language-javascript">// 边框风格      borderStyle:'dotted'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/392abc7ba26939718533a5a9de7ee3e9.png"> <pre>  <code class="language-javascript">// 边框风格      borderStyle:'dashed'</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/a172f21a8c99e17f08cd0702d301748d.png"></li>       <li> <p>borderTopColor：顶部边框颜色（参考上面）</p> </li>       <li> <p>borderTopWidth：顶部边框宽度（参考上面）</p> </li>       <li> <p>borderTopLeftRadius：顶部左边圆角（参考上面）</p> </li>       <li> <p>borderTopRightRadius：顶部右边圆角（参考上面）</p> </li>       <li> <p>borderWidth：边框宽度</p> </li>      </ul> <pre>  <code class="language-javascript">// 全体边框宽度      borderWidth:5</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/c6f79e9167e2c69cbd4e4f9783139d73.png">      <ul>       <li>opacity：设置透明度，取值从 0~1</li>      </ul> <pre>  <code class="language-javascript">// 透明度      opacity:0.5</code></pre> 效果：<br> <img src="https://simg.open-open.com/show/bbe01ca4952aca5493adabe87ea39c34.png">      <ul>       <li> <p>overflow('visible', 'hidden')：设置内容超出容器部分是否显示（以后的文章讲解）</p> </li>       <li> <p>elevation：高度，设置Z轴，可产生立体效果（以后文章讲解）</p> </li>      </ul> </li>    </ul>    <h2>View 组件使用</h2>    <ul>     <li>简单使用</li>    </ul>    <pre>  <code class="language-javascript">render() {      return (        <View style={styles.container}>            <View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}>              </View>        </View>      );    }</code></pre>    <ul>     <li> <p>上面代码是我们熟悉的 CSS 写法</p> <p>效果：</p> <img src="https://simg.open-open.com/show/435fc679ac753c1548092b4532bdda17.png"></li>     <li> <p>在 React Native 开发中，推荐我们采用 StyleSheet 来进行组件的布局，这样从代码结构上来看会更加清晰，有利于后期的维护</p> </li>     <li>我们将上面的样式通过 StyleSheet 方式来实现 <pre>  <code class="language-javascript">var test = React.createClass({          render() {              return (                  <View style={styles.container}>                      <View style={styles.viewStyle}>                        </View>                  </View>              );          }      });</code></pre> <pre>  <code class="language-javascript">var styles = StyleSheet.create({          container: {              flex: 1,              justifyContent: 'center',              alignItems: 'center',              backgroundColor: '#F5FCFF',          },            viewStyle: {              // 尺寸              width:300,              height:100,              // 背景颜色              backgroundColor:'red',              // 边框宽度              borderWidth:1,              // 边框颜色              borderColor:'black'          }        });</code></pre> </li>    </ul>    <p>View 在开发中是经常会接触到的组件，灵活运用它可以帮助我们更好地结构化代码，甚至更方便的布局</p>    <p> </p>    <p>来自：http://www.cnblogs.com/miaomiaoshen/p/6144541.html</p>    <p> </p>