最近在寫公司的項目,因產品設計需求,須要相似以下的效果,像是一個時間軸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函數中添加組件就完事了函數
<StepIndicator stepCount={3} customStyles={customStyles} currentPosition={this.state.currentPosition} labels={labels} />
currentPosition設置當前時間軸的節點位置,over,來看一下最終的效果this