react-native時間軸組件的使用

最近在寫公司的項目,因產品設計需求,須要相似以下的效果,像是一個時間軸 react

時間軸

本着不重複造輪子的目標,在最喜歡的github上找尋合適的組件,終於發現了一個很是棒的組件:react-native-step-indicator 使用就很是簡單了 第一步,添加組件依賴,這裏牆裂建議你們使用yarn管理項目依賴git

yarn add react-native-step-indicator
複製代碼

第二步,在須要的頁面導入react-native-step-indicatorgithub

import StepIndicator from 'react-native-step-indicator';
複製代碼

第三步,就是定義須要的數據及樣式react-native

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函數中添加組件就完事了bash

<StepIndicator
                        stepCount={3}
                        customStyles={customStyles}
                        currentPosition={this.state.currentPosition}
                        labels={labels}
                    />
複製代碼

在這裏插入圖片描述

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

在這裏插入圖片描述
相關文章
相關標籤/搜索