脚本宝典收集整理的这篇文章主要介绍了

时间轴组件react-native-step-indicator使用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

最近在写公司的项目,因产品设计需求,需要类似如下的效果,像是一个时间轴

clipboard.png

本着不重复造轮子的目标,在最喜欢的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,来看一下最终的效果
在这里插入图片描述

总结

以上是脚本宝典为你收集整理的

时间轴组件react-native-step-indicator使用

全部内容,希望文章能够帮你解决

时间轴组件react-native-step-indicator使用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过