超强通用的React Native Tab控制器使用详解-入门篇

jmserfew 8年前
   <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>