react-native 滑動標題欄

在我們的應用中經常有上面顯示一行標題欄，下面分別每個標題對應一個頁面，標題欄與頁面聯動的情形，在Android中我們可以簡單用Toolbar和ViewPager來實現，react-native中至今還沒有提供原生的組件供我們來應用，但我們可以通過依賴github大神skv-headless的react-native-scrollable-tab-view（https://github.com/skv-headless/react-native-scrollable-tab-view）來實現相應的功能。
首先我們還是要切換到我們的項目目錄下，運行 npm install react-native-scrollable-tab-view –save，來將項目依賴進我們的項目中。

現在，我們就可以在我們的項目中使用。首先

import ScrollableTabView from 'react-native-scrollable-tab-view';

再將ScrollableTabView組件添加進我們的代碼中：

<ScrollableTabView
                        renderTabBar={()=><CustomTabBar/>}
                        style={{flex:1,backgroundColor:'white'}}
                        tabBarBackgroundColor="white"
                        tabBarInactiveTextColor="#494949"
                        tabBarActiveTextColor="#00A9F2"
                        tabBarUnderlineStyle={{backgroundColor:'#00A9F2'}}
                    >
                        <FindList tabLabel="精選"/>
                        <FindList tabLabel="同城"/>
                        <FindList tabLabel="資訊"/>
                        <FindList tabLabel="活動"/>
                        <FindList tabLabel="話題"/>
                    </ScrollableTabView>

• renderTabBar 可以指定我們自定義TabBar組件
• tabBarBackgroundColor tabBar背景的顏色
• tabBarInactiveTextColor tab沒有被選中時的字體顏色
• tabBarActiveTextColor tab被選中時的字體顏色
• tabBarUnderlineStyle 定義下劃線的樣式
• tabBarTextStyle 設置tab文本的樣式 例：{fontFamily: ‘Roboto’, fontSize: 15}
• initialPage number 設置初始選中的page

FindList是對應滑動的頁面，tabLabel即爲該頁面對應的tab文本值。

截圖：

源碼