<h2><strong>前言</strong></h2>    <ul>     <li> <p>学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习</p> </li>     <li> <p>本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢</p> </li>    </ul>    <h2><strong>TabBarIOS 组件简介</strong></h2>    <ul>     <li>目前的APP内，大部分都是选项与选项之间切换，比如：微信、微博、QQ空间…，在iOS中，我们可以通过TabItem类进行实现，那么，在React Native中，我们可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件不支持Android，当然后面我们会通过自定义该组件来满足实际开发需求</li>     <li>当然，本章涉及到了 TabBarIOS组件 ，那么必不可少的，肯定需要与 TabBarIOS.Item 来搭配使用，废话不多说，先来看它们各自都拥有哪些属性</li>    </ul>    <h2><strong>TabBarIOS 常见属性</strong></h2>    <ul>     <li> <p>继承了View的所有属性</p> </li>     <li> <p>barTintColor：标签栏的背景颜色</p> </li>     <li> <p>tintColor：当前被选中的标签图标颜色</p> </li>     <li> <p>translucent：bool值，决定标签栏是否需要半透明化</p> </li>    </ul>    <h2><strong>TabBarIOS.Item 常见属性</strong></h2>    <ul>     <li> <p>继承了View的所有属性</p> </li>     <li> <p>badge：图标右上角显示的红色角标</p> </li>     <li> <p>icon：给当前标签指定一个自定义图标(如果定义了 systemIcon属性 这个属性会被忽略)</p> </li>     <li> <p>onPress：点此标签被选中时调用，你应该修改过组件的状态使 selected={true}</p> </li>     <li> <p>selected：这个属性决定了子视图是否可见，如果你看到一个空白的页面，很可能是没有选中任何一个标签</p> </li>     <li> <p>selectedIcon：当标签被选中的时候显示的自定义图标（如果定义了systemIcon属性，这个属性会被忽略，如果定义了icon而没定义这个属性，在选中的时候图标会被染上蓝色）</p> </li>     <li>systemIcom：一些预定义的系统图标（如果使用了此属性，标题和自定义图标都会被覆盖为系统定义的值）      <ul>       <li>默认值：'bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated'</li>      </ul> </li>     <li> <p>title：在图标下面显示的标题文字（如果定义了 systemIcon属性 ,这个属性会被忽略）</p> </li>    </ul>    <h2><strong>TabBarIOS 初体验</strong></h2>    <p>先简单来看下怎么使用TabBarIOS</p>    <pre style="text-align:left">  <code class="language-javascript">import {          TabBarIOS      } from 'react-native';</code></pre>    <pre style="text-align:left">  <code class="language-javascript">render() {          return (              <View style={styles.container}>                  <TabBarIOS                      style={{height:49, width: width}}                  >                  </TabBarIOS>              </View>          );      }</code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8b656163ea47552d4d3acbd234f27f09.png"></p>    <pre style="text-align:left">  <code class="language-javascript">render() {          return (              <View style={styles.container}>                  <TabBarIOS                      style={{height:49, width: width}}                  >                      <TabBarIOS.Item                          systemIcon="bookmarks"  // 系统图标(bookmarks)                      >                      </TabBarIOS.Item>                      <TabBarIOS.Item                          systemIcon="contacts"  // 系统图标(contacts)                      >                      </TabBarIOS.Item>                      <TabBarIOS.Item                          systemIcon="downloads"  // 系统图标(downloads)                      >                      </TabBarIOS.Item>                      <TabBarIOS.Item                          systemIcon="favorites"  // 系统图标(favorites)                      >                      </TabBarIOS.Item>                      <TabBarIOS.Item                          systemIcon="history"  // 系统图标(history)                      >                      </TabBarIOS.Item>                  </TabBarIOS>              </View>          );      }</code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2e6982964be2d3d1878b27ffdb22538f.png"></p>    <ul>     <li>首先我们需要引入TabBarIOS</li>     <li>使用 TabBarIOS 很简单，但是需要配合 TabBarIOS.Item 使用,(需要注意的是我们必须给 TabBarIOS 设置尺寸，不然可能会造成实例化却无法看到的问题)</li>     <li style="text-align:left">接着我们来给它添加 Item （TabBarIOS最多只能包含5个 Item ，超出的部分会用 more图标 代替）</li>     <li style="text-align:center">是不是很简单，接下来我们试着修改一下 TabBarIOS 的属性，看看效果怎样样 <pre style="text-align:left">  <code class="language-javascript"><TabBarIOS          style={{height:49, width: width}}          tintColor="green"   // 被选中标签颜色      >      </TabBarIOS></code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/dd2151371969a3663e18c096c9f881f5.png"> <pre style="text-align:left">  <code class="language-javascript"><TabBarIOS          style={{height:49, width: width}}          tintColor="green"          barTintColor="black"    // TabBarIOS背景色      >      </TabBarIOS></code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/7a38c5f13ea874e3303ca0024a08205b.png"> <pre>  <code class="language-javascript"><TabBarIOS          style={{height:49, width: width}}          tintColor="green"          barTintColor="black"          translucent={false}     // TabBarIOS不需要半透明效果      >      </TabBarIOS></code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/3ba849f59df817aca9b874f8e0ea709e.png">      <ul>       <li>当前被选中标签颜色</li>       <li>是否有半透明效果</li>      </ul> </li>    </ul>    <p>这边再来试试 TabBarIOS.Item 的属性</p>    <pre>  <code class="language-javascript"><TabBarIOS          style={{height:49, width: width}}          tintColor="green"          barTintColor="black"          translucent={false}      >          <TabBarIOS.Item              systemIcon="bookmarks"  // 系统图标(bookmarks)              badge="99999999"          >          </TabBarIOS.Item>          <TabBarIOS.Item              systemIcon="contacts"  // 系统图标(contacts)              badge="15"          >          </TabBarIOS.Item>          <TabBarIOS.Item              systemIcon="downloads"  // 系统图标(downloads)              badge="@$!@"          >          </TabBarIOS.Item>          <TabBarIOS.Item              systemIcon="favorites"  // 系统图标(favorites)              badge="aBBc"          >          </TabBarIOS.Item>          <TabBarIOS.Item              systemIcon="history"  // 系统图标(history)              badge="99+"          >          </TabBarIOS.Item>      </TabBarIOS></code></pre>    <p style="text-align:center">效果：<br> <img src="https://simg.open-open.com/show/9ca2b2e6f63c61c26e93c1d489f80eae.png"></p>    <p style="text-align:center"> </p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          renderAsOriginal={true} // 如果为false，只会显示纯色图片          icon={require('image!home')}      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2e86953f730c09929c2636cf6db5808f.png"></p>    <pre>  <code class="language-javascript">selectedIcon={require('image!baker')}</code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b5a2857cba09440b25d0cb555aac13e7.gif"></p>    <pre>  <code class="language-javascript">title="首页"</code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6fb9207094770536b145fc5dc90289b4.png"></p>    <p>系统自带图标</p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="bookmarks"  // 系统图标(bookmarks)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/20ecc828c316cf4b35f0ca9e6a937ca0.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="contacts"  // 系统图标(contacts)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6b974450695e670d72da8e8b1ebe81f6.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="downloads"  // 系统图标(downloads)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5d48e2148d0f526a87cbc37e2f075450.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="favorites"  // 系统图标(favorites)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6150a8ba2cf6c334fbf6b95a67e653bf.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="featured"  // 系统图标(featured)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/db383c12a21082c5840c48bcbafce39f.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="history"  // 系统图标(history)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2ef43b872435097268f6ba697dca4131.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="more"  // 系统图标(more)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/550dca97f7bb43d2aab05c5e9f439959.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="most-recent"  // 系统图标(most-recent)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6259128f4aa74d3ab194ec655126011d.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="most-viewed"  // 系统图标(most-viewed)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a2749d470e674c27a49c68fb6723668f.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="recents"  // 系统图标(recents)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3837691bc5bcdf91ee8d287b3799b6ac.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="search"  // 系统图标(search)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/98021e200362665439c00e02abac1384.png"></p>    <pre>  <code class="language-javascript"><TabBarIOS.Item          systemIcon="top-rated"  // 系统图标(top-rated)      >      </TabBarIOS.Item></code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7192e008a248d4f8eda8491e8c0a8429.png"></p>    <ul>     <li>most-recent</li>     <li>most-viewed</li>     <li> <p>角标（角标的位置会受到TabBarIOS右边空间音效，当位置不够时，会自动往左移动，以保证显示完整性）</p> </li>     <li>自定义图标（目前只支持本地图片）</li>     <li>自定义高亮图标（目前只支持本地图片，如果没有设置，则会显示选中颜色图标）</li>     <li>文字（如果设置了系统图标，那么这个属性会被忽略）</li>    </ul>    <h2><strong>TabBarIOS.Item点击</strong></h2>    <ul>     <li>到这里肯定有人会说，为什么我的 TabBarIOS.Item 不能接收点击事件，无法切换界面，这边就来讲解怎么去实现页面的切换，它涉及到 TabBarIOS.Item 的两个属性 —— selected 和 onPress <pre>  <code class="language-javascript">render() {        return (          <View style={styles.container}>              <TabBarIOS                  style={{height:49, width: width}}                  tintColor="green"                  barTintColor="black"                  translucent={false}              >                  <TabBarIOS.Item                      systemIcon="bookmarks"  // 系统图标(bookmarks)                  >                      <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>                        </View>                  </TabBarIOS.Item>                  <TabBarIOS.Item                      systemIcon="contacts"  // 系统图标(contacts)                  >                      <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>                        </View>                  </TabBarIOS.Item>                  <TabBarIOS.Item                      systemIcon="downloads"  // 系统图标(downloads）                  >                      <View style={[styles.childViewStyle, {backgroundColor:'red'}]}>                        </View>                  </TabBarIOS.Item>                  <TabBarIOS.Item                      systemIcon="favorites"  // 系统图标(favorites)                  >                      <View style={[styles.childViewStyle, {backgroundColor:'green'}]}>                        </View>                  </TabBarIOS.Item>                  <TabBarIOS.Item                      systemIcon="history"  // 系统图标(history)                  >                      <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>                        </View>                  </TabBarIOS.Item>              </TabBarIOS>          </View>      );  }</code></pre>      <ul>       <li>首先，要实现页面之间的切换，那么首先它们自己要有对应的页面，这边先来给各个 Item 设置属于自己的页面</li>       <li>页面之间的切换其实就是根据 selected 是否为 ture，以此决定是否重新渲染界面，涉及到重新渲染，所以肯定需要使用到 getInitialState（状态机） ，具体操作如下 <pre>  <code class="language-javascript">getInitialState(){          return{              selectedTabItem:0   // 预设变量，记录当前点击的item          }      },</code></pre>        <ul>         <li>首先我们定义一个初始化变量来确定要显示的页面</li>        </ul> </li>      </ul> </li>    </ul>    <p>当我们点击相应标签的时候，系统就会调用 onPress</p>    <p>属性来进行反馈</p>    <pre>  <code class="language-javascript">onPress={() => {this.setState({selectedTabItem:0})}}</code></pre>    <pre>  <code class="language-javascript">selected={this.state.selectedTabItem == 0}</code></pre>    <pre>  <code class="language-javascript">var TabBarIOSDemo = React.createClass({            getInitialState(){              return{                  selectedTabItem:0              }          },            render() {              return (                  <View style={styles.container}>                      <TabBarIOS                          style={{height:49, width: width}}                          tintColor="green"                          barTintColor="black"                          translucent={false}                      >                          <TabBarIOS.Item                              systemIcon="bookmarks"  // 系统图标(bookmarks)                              onPress={() => {this.setState({selectedTabItem:0})}}                              selected={this.state.selectedTabItem == 0}                          >                              <View style={[styles.childViewStyle, {backgroundColor:'yellow'}]}>                                </View>                          </TabBarIOS.Item>                          <TabBarIOS.Item                              systemIcon="contacts"  // 系统图标(contacts)                              onPress={() => {this.setState({selectedTabItem:1})}}                              selected={this.state.selectedTabItem == 1}                          >                              <View style={[styles.childViewStyle, {backgroundColor:'blue'}]}>                                </View>                          </TabBarIOS.Item>                          <TabBarIOS.Item                              systemIcon="downloads"  // 系统图标(downloads)                              onPress={() => {this.setState({selectedTabItem:2})}}                              selected={this.state.selectedTabItem == 2}                          >                              <View style={[styles.childViewStyle, {backgroundColor:'red'}]}>                                </View>                          </TabBarIOS.Item>                          <TabBarIOS.Item                              systemIcon="favorites"  // 系统图标(favorites)                              onPress={() => {this.setState({selectedTabItem:3})}}                              selected={this.state.selectedTabItem == 3}                          >                              <View style={[styles.childViewStyle, {backgroundColor:'green'}]}>                                </View>                          </TabBarIOS.Item>                          <TabBarIOS.Item                              systemIcon="history"  // 系统图标(history)                              onPress={() => {this.setState({selectedTabItem:4})}}                              selected={this.state.selectedTabItem == 4}                          >                              <View style={[styles.childViewStyle, {backgroundColor:'gray'}]}>                                </View>                          </TabBarIOS.Item>                      </TabBarIOS>                  </View>              );          }      });</code></pre>    <p>效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ae568c027de9bbfaca6dc59cbb736b4.gif"></p>    <ul>     <li>首先点击onPress的时候我们需要更新 状态机 中预设变量的值</li>     <li>接着我们要根据 预设变量 来判断跳转到哪个页面（当预设变量的值改变后，状态机会再次调用 render 函数进行渲染，也就会调用 TabBarIOS.Item 内的 selected 属性）</li>     <li>视图部分完整代码</li>     <li>到这里，TabBarIOS页面切换就完成了，当然实际开发中我们会抽取代码，使代码看起来不会这么杂乱，这在后面会通过综合项目进行讲解</li>    </ul>    <h2><strong>补充</strong></h2>    <ul>     <li> <p>上面出现这样的代码，可能很多初学者不知道什么意思，这边就补充说明一下，在JS中是允许多个样式通过数组的形式传递的，它会根据数组内容自动去解析需要的值，并根据优先级去选择优先选择使用哪个属性</p> <p><img src="https://simg.open-open.com/show/d59c8c93f7fef46a725c51ea7cfe3660.png"></p> </li>    </ul>    <p> </p>    <p>来自：http://www.cnblogs.com/miaomiaoshen/p/6085266.html</p>    <p> </p>