React Native學習（五）—— 使用插件react-native-scrollable-tab-view

本文基於React Native 0.52

Demo上傳到Git了，有須要能夠看看，寫了新內容會上傳的。Git地址 https://github.com/gingerJY/React-Native-Demo

1、總覽

以下圖，有一個滑動的tab切換，就是用react-native-scrollable-tab-view來實現的。

 

 

2、使用react-native-scrollable-tab-view插件

一、經過npm將插件加入項目

npm install react-native-scrollable-tab-view --save

　　二、在home.js引入插件

import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';

　　三、使用插件

　　　　① 這裏就寫一下我這個效果的實現，其餘內容能夠看 https://github.com/skv-headless/react-native-scrollable-tab-view

　　　　② TabBar有DefaultTabBar和ScrollableTabBar兩種，這裏使用ScrollableTabBar，下面是官方給出的例子（若是是在APP的首頁會出現內容不顯示的問題，三裏面有解決辦法）

     <ScrollableTabView
            initialPage={0}
            renderTabBar={() => <ScrollableTabBar />}
      >
            <Text tabLabel='Tab #1'>My</Text>
            <Text tabLabel='Tab #2 word word'>favorite</Text>
            <Text tabLabel='Tab #3 word word word'>project</Text>
            <Text tabLabel='Tab #4 word word word word'>favorite</Text>
            <Text tabLabel='Tab #5'>project</Text>
     </ScrollableTabView>

　　

③ 修改默認樣式

　　注意改變下劃線顏色，要設置backgroundColor

<ScrollableTabView
      renderTabBar={() => <ScrollableTabBar />}
      tabBarBackgroundColor='#fff'
      tabBarActiveTextColor='#b4282d'
      tabBarInactiveTextColor='#333'
      tabBarUnderlineStyle={styles.tabBarUnderline}
>
 …………省略
</ScrollableTabView>

　　

tabBarUnderline: {
    backgroundColor: '#b4282d',
    height: 2,
}

　　　　④ 添加數據

　　　　　　 因爲tab項不少，因此數據寫在state裏，減小重複代碼，也便於修改

constructor(props) {
   super(props);
   this.state = {
      label: ['推薦', '新品', '居家', '餐廚', '配件', '服裝', '電器', '洗護', '雜貨', '飲食', '嬰童', '志趣'],
   };
}

　　　　⑤ 遍歷數據　　

   renderScrollableTab() {
        let label = this.state.label
            return (
                    <ScrollableTabView
                        renderTabBar={() => <ScrollableTabBar />}
                        …………省略
                    >
                        {
                            label.map((item, index) => {
                                return (<Recommend tabLabel={item} key={index}/>)
                            })
                        }
                    </ScrollableTabView>
            )
    }

　　　　　　 注：Recommend 是一個新加的頁面，注意要在home.js引入。固然也能夠不加新頁面，return一個Text也能夠。

　　　　home.js完整代碼 https://github.com/gingerJY/example/blob/master/RN_scrollableTab/home.js

3、解決不顯示問題

　　APP首頁使用插件常常會出現一些別處沒有的問題，這個tab下面內容不顯示就是其中之一。解決方法爲：

　　一、加一個是否顯示的狀態　　　　

  constructor(props) {
        super(props);
        this.state = {
            tabShow: false,
        };
  }

　　二、在初始化render以後，將狀態設爲true

componentDidMount() {
   setTimeout(() => {
     this.setState({
         tabShow: true
     });
   }, 0)
}

　　三、render的時候判斷this.state.tabShow，等setTimeout執行後改變了狀態，纔會渲染

   if (this.state.tabShow){
            return (
                <ScrollableTabView
                    renderTabBar={() => <ScrollableTabBar />}
                   …………略
                >
                    …………略
                </ScrollableTabView> 
            )
     }

　　這樣就能夠顯示了。

END--------------------------------------------------

生命週期、佈局