最近在寫公司的專案，因產品設計需求，需要類似如下的效果，像是一個時間軸

本著不重複造輪子的目標，在最喜歡的github上找尋合適的元件，終於發現了一個非常棒的元件：react-native-step-indicator 使用就非常簡單了 第一步，新增元件依賴,這裡牆裂建議大家使用yarn管理專案依賴

yarn add react-native-step-indicator

第二步，在需要的頁面匯入react-native-step-indicator

import StepIndicator from 'react-native-step-indicator';

第三步，就是定義需要的資料及樣式

const labels = ["填寫認證資訊","資料稽核","認證完成"];
const customStyles = {
    stepIndicatorSize: 35,
    currentStepIndicatorSize:40,
    separatorStrokeWidth: 2,
    currentStepStrokeWidth: 3,
    stepStrokeCurrentColor: '#fe7013',
    stepStrokeWidth: 3,
    stepStrokeFinishedColor: '#fe7013',
    stepStrokeUnFinishedColor: '#aaaaaa',
    separatorFinishedColor: '#fe7013',
    separatorUnFinishedColor: '#aaaaaa',
    stepIndicatorFinishedColor: '#fe7013',
    stepIndicatorUnFinishedColor: '#ffffff',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 13,
    currentStepIndicatorLabelFontSize: 13,
    stepIndicatorLabelCurrentColor: '#fe7013',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: '#aaaaaa',
    labelColor: '#999999',
    labelSize: 13,
    currentStepLabelColor: '#fe7013'
}
 

labels陣列定義的是時間軸上的節點值

第四步，在render函式中新增元件就完事了

<StepIndicator
                        stepCount={3}
                        customStyles={customStyles}
                        currentPosition={this.state.currentPosition}
                        labels={labels}
                    />

currentPosition設定當前時間軸的節點位置，over,來看一下最終的效果

相關推薦