<p>官方为我们提供的Tab控制器有两种：<br> <a href="/misc/goto?guid=4959675099842849881">TabBarIOS</a>，仅适用于IOS平台<br> <a href="/misc/goto?guid=4959675099929529473">ViewPagerAndroid</a>，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）</p>    <p>如果我们需要一个更通用的Tab控制器，那么就要借助开源的力量，本篇文章教你如何使用<br> <a href="/misc/goto?guid=4959675100018189231">react-native-scrollable-tab-view</a>，这是官方Demo的效果</p>    <p><img src="https://simg.open-open.com/show/0eb05d5791f03ac50fc291dc7799781e.gif" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="369" height="682"></p>    <p>demo.gif</p>    <p><img src="https://simg.open-open.com/show/71b172f9a0d166236bc085ca5efe70f3.gif" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="369" height="682"></p>    <p>demo-fb.gif</p>    <p><strong>一、准备工作</strong></p>    <ol>     <li>新建一个项目 <pre>  <code> react-native init Demo6</code></pre> </li>     <li>添加react-native-scrollable-tab-view <pre>  <code> npm install react-native-scrollable-tab-view --save</code></pre> </li>    </ol>    <p><strong>二、Props介绍</strong></p>    <ul>     <li> <p>renderTabBar<em>(Function:ReactComponent)</em><br> TabBar的样式，系统提供了两种默认的，分别是<code>DefaultTabBar</code>和<code>ScrollableTabBar</code>。当然，我们也可以自定义一个，我们会在下篇文章重点讲解如何去自定义TabBar样式。</p> <pre>  <code>render() {    return (      <ScrollableTabView        renderTabBar={() => <DefaultTabBar/>}>        <Text tabLabel='Tab1'/>        <Text tabLabel='Tab2'/>        <Text tabLabel='Tab3'/>        <Text tabLabel='Tab4'/>        <Text tabLabel='Tab5'/>        <Text tabLabel='Tab6'/>      </ScrollableTabView>    );  }</code></pre> <p>注意：每个被包含的子视图需要使用<strong>tabLabel</strong>属性，表示对应Tab显示的文字<br> <strong>DefaultTabBar</strong>：Tab会平分在水平方向的空间</p> <img src="https://simg.open-open.com/show/118171873f7053683e99b122da2d26ff.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="710" height="252"> <p>default.png</p> <p><br> <strong>ScrollableTabBar</strong>：Tab可以超过屏幕范围，滚动可以显示</p> <img src="https://simg.open-open.com/show/d97cf84f2cce90b786453c29dace6fda.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="712" height="274"> <p>scrollable.png</p> </li>     <li> <p>tabBarPosition<em>(String，默认值'top')</em></p> <pre>  <code>render() {    return (      <ScrollableTabView        tabBarPosition='top'        renderTabBar={() => <DefaultTabBar/>}>        ...      </ScrollableTabView>    );  }</code></pre> <p><strong>top</strong>：位于屏幕顶部</p> <img src="https://simg.open-open.com/show/118171873f7053683e99b122da2d26ff.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="710" height="252"> <p>default.png</p> <p><br> <strong>bottom</strong>：位于屏幕底部</p> <img src="https://simg.open-open.com/show/1c420adb0a0bf9930c9931b731558ff6.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="710" height="264"> <p>bottom.png</p> <p><br> <strong>overlayTop</strong>：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）</p> <img src="https://simg.open-open.com/show/280b0324acc8aaceafca2a3d13703529.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="715" height="217"> <p>overlayTop.png</p> <p><br> <strong>overlayBottom</strong>：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）</p> <img src="https://simg.open-open.com/show/592a6f3c5e694bdb8d08b7a73b8f90b0.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="712" height="170"> <p>overlayBottom.png</p> </li>     <li> <p>onChangeTab<em>(Function)</em><br> Tab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数<br> <strong>i</strong>：被选中的Tab的下标（从0开始）<br> <strong>ref</strong>：被选中的Tab对象（基本用不到）</p> <pre>  <code>render() {    return (      <ScrollableTabView        renderTabBar={() => <DefaultTabBar/>}        onChangeTab={(obj) => {            console.log('index:' + obj.i);          }        }>        ...      </ScrollableTabView>    );  }</code></pre> </li>     <li> <p>onScroll<em>(Function)</em><br> 视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab数量-1]</p> <pre>  <code>render() {    return (      <ScrollableTabView        renderTabBar={() => <DefaultTabBar/>}        onScroll={(postion) => {              // float类型 [0, tab数量-1]              console.log('scroll position:' + postion);          }        }>        ...      </ScrollableTabView>    );  }</code></pre> </li>     <li>locked<em>(Bool，默认为false)</em><br> 表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能<strong>“点击”</strong>Tab来切换视图。 <pre>  <code>render() {    return (      <ScrollableTabView        locked={false}        renderTabBar={() => <DefaultTabBar/>}>        ...      </ScrollableTabView>    );  }</code></pre> </li>     <li>initialPage<em>(Integer)</em><br> 初始化时被选中的Tab下标，默认是0（即第一页） <pre>  <code>render() {    return (      <ScrollableTabView        initialPage={1}        renderTabBar={() => <DefaultTabBar/>}>        ...      </ScrollableTabView>    );  }</code></pre> </li>     <li>page<em>(Integer)</em><br> 设置选中指定的Tab（然而测试下来并没有任何效果，知道原因的同学麻烦留言下 ~）      <blockquote>       <p>写于2016.06.29：跟作者沟通下来下个版本打算废弃这个属性，原话为‘It is a legacy I would like to remove it but someone might use it. Probably in next version I'll remove it.’参考<a href="/misc/goto?guid=4959675100087579899">issue#320</a></p>      </blockquote> </li>     <li>children<em>(ReactComponents)</em><br> 表示所有子视图的数组，比如下面的代码，children则是一个长度为6的数组，元素类型为Text <pre>  <code>render() {    return (      <ScrollableTabView        renderTabBar={() => <DefaultTabBar/>}>        <Text tabLabel='Tab1'/>        <Text tabLabel='Tab2'/>        <Text tabLabel='Tab3'/>        <Text tabLabel='Tab4'/>        <Text tabLabel='Tab5'/>        <Text tabLabel='Tab6'/>      </ScrollableTabView>    );  }</code></pre> </li>     <li>tabBarUnderlineColor<em>(String)</em><br> 设置<code>DefaultTabBar</code>和<code>ScrollableTabBar</code>Tab选中时下方横线的颜色</li>     <li>tabBarBackgroundColor<em>(String)</em><br> 设置整个Tab这一栏的背景颜色</li>     <li>tabBarActiveTextColor<em>(String)</em><br> 设置选中Tab的文字颜色</li>     <li>tabBarInactiveTextColor<em>(String)</em><br> 设置未选中Tab的文字颜色</li>     <li> <p>tabBarTextStyle<em>(Object)</em><br> 设置Tab文字的样式，比如字号、字体等<br> <strong>上面这5个样式示例如下</strong>：</p> <pre>  <code>render() {    return (      <ScrollableTabView        renderTabBar={() => <DefaultTabBar />}        tabBarUnderlineColor='#FF0000'        tabBarBackgroundColor='#FFFFFF'        tabBarActiveTextColor='#9B30FF'        tabBarInactiveTextColor='#7A67EE'        tabBarTextStyle={{fontSize: 18}}      >      ...      </ScrollableTabView>    );  }</code></pre> <img src="https://simg.open-open.com/show/e62896cc0036d8a92c6bee16c09983be.png" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="711" height="223"> <p>top5.png</p> </li>     <li> <p>style<em>(<a href="/misc/goto?guid=4959675100172877005">View.propTypes.style</a>)</em><br> 系统View都拥有的属性，基本不会涉及到。</p> </li>     <li>contentProps<em>(Object)</em><br> 这里要稍微说下<a href="/misc/goto?guid=4959675100018189231">react-native-scrollable-tab-view</a>的实现，其实在Android平台底层用的是<code>ViewPagerAndroid</code>，iOS平台用的是<code>ScrollView</code>。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。</li>     <li>scrollWithoutAnimation<em>(Bool，默认为false)</em><br> 设置<strong>“点击”</strong>Tab时，视图切换是否有动画，默认为false（即：有动画效果）。 <pre>  <code>render() {    return (      <ScrollableTabView        scrollWithoutAnimation={true}        renderTabBar={() => <DefaultTabBar/>}>        ...      </ScrollableTabView>    );  }</code></pre> <strong>注意：这个属性的设置对滑动视图切换的动画效果没有影响</strong>，仅仅对<strong>“点击”</strong>Tab效果有作用。看下下面动态图的对比（今天录得动态图不知道为啥抽疯了，调了好几遍都不行，凑合看吧~）<br> <img src="https://simg.open-open.com/show/dec53d8eda744ac4d81c66a85f19fe36.gif" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="700" height="1260"> <p>click.gif</p> <br> <img src="https://simg.open-open.com/show/dba99453e7e895fffebb51a0ed9e3243.gif" alt="超强通用的React Native Tab控制器使用详解-入门篇" width="700" height="1260"> <p>slide.gif</p> </li>    </ul>    <p><br>  </p>    <p><a href="/misc/goto?guid=4959675100267990724">阅读原文</a></p>    <p> </p>    <p> </p>