react-native-scrollable-topbar

基於React Native封裝的資訊頻道TopBar，常見於新聞客戶端，具體實現功能如下：

• TopBar區域可手動滑動(Underline 聯動)
• 點選頻道實現內容區切換
• 根據內容區(this.props.children)觸控手勢實現頻道切換
• 頻道位置校準，左右邊界臨界位置處理，實現自動滑動校準

Installation

npm install react-native-scrollable-topbar --save

Import into your project

import ScrollTopBar from "react-native-scrollable-topbar";

Examle useage

<ScrollTopBar
  topBarUnderlineStyle={{}}				                                                    // 下劃線樣式
  labelList={['推薦', '軍事', '政治', '財經', '娛樂', '社會', '生活', '美食', '旅行']}			// 標題欄素材
  topBarInactiveTextColor={Colors.
 
C5}		                                              // label 文字非選中顏色
  topBarActiveTextColor={Colors.CB}		                                                // label 文字選中顏色
  topBarBackgroundColor={Colors.C8}		                                                // 背景顏色
>
  {['推薦', '軍事', '政治', '財經', '娛樂', '社會',
 
 '生活', '美食', '旅行'].map((e, i) => 
      <ArticleList key={i} index={i} navigation={this.props.navigation} /> 
  )}
</ScrollTopBar>

Properties

GitHub專案地址