gpt4 book ai didi

reactjs - 用完整的圆角 react native 日历周期标记

转载 作者:行者123 更新时间:2023-12-04 15:22:15 28 4
gpt4 key购买 nike

请引用下面的日历图片。

full round corners with period marking

我使用了 react-native-calendars npm 库,现在我想像上面那样实现它。

please ignore the dots marking only consider start and end date with period marking

但是我只获得了带有句号标记的半角开始和结束日期。请引用下图。

half cornered start and end date image

现在我需要使用 react-native-calendars 将开始日期和结束日期完全舍入。任何人请帮助我实现这一目标。这个图书馆有可能吗?还是有任何react native相关的库来实现这个?

最佳答案

终于找到解决办法了。但是必须修改节点模块,所以记得添加更改以阅读我。然后其他人也可以使用这些。

转到此文件。node_modules/react-native-calendars/src/calendar/day/period/index.js

在行下方评论。

filters = (
....
)

添加以下行。

        const customStyles = {
dayStyles: {backgroundColor: '#BEB1D7',width: 20,height:
26,position:'absolute'}
}
fillers = (
<View style={[this.style.fillers, fillerStyle]}>
{this.props.marking.endingDay ?<View style={customStyles.dayStyles}></View>
: null}

<View style={[this.style.leftFiller, leftFillerStyle]}/>
<View style={[this.style.rightFiller, rightFillerStyle]}/>

{this.props.marking.startingDay ?<View style={[customStyles.dayStyles,
{marginLeft: 15}]}></View> : null}
</View>
);

请注意,您可以编辑 customStyles

node_modules 相关阶段现已完成。

现在转到您的日历组件并使用其高级样式指南覆盖原始日历的样式。我做了如下所述。

calendarTheme = { 
'stylesheet.day.period': {
wrapper: {
alignItems: 'center',
alignSelf: 'stretch',
marginLeft: -2,
borderRadius: 2,
overflow: 'hidden'
},
leftFiller: {
height: 26,
flex: 1,
marginLeft: 50
}
}
}

关于reactjs - 用完整的圆角 react native 日历周期标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63058764/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com