reactjs - 用全圆角反应本机日历周期标记
问题描述
请参考下面的日历图片。
我使用了 react-native-calendarsnpm
库,现在我想像上面那样实现它。
请忽略点标记只考虑带有句点标记的开始和结束日期
但是,我只用周期标记实现了一半的开始和结束日期。请参考下图。
现在我需要用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
}
}
}
推荐阅读
- javascript - 如何使用 JavaScript 显示图像和文本搜索结果?
- java - Spring boot Jsp / Tag在不同模块中
- jquery - Jssor 是否可以在滑块上放置一个暂停按钮并播放?
- spring - Spring Boot 执行器端点未通过 HTTP 公开
- python - 将 Pandas DataFrame 列值与另一个 DataFrame 列匹配
- glsl - Vulkan 是否支持着色器中的原子浮点操作?
- javascript - 无法读取未定义的属性“电子表格” - 谷歌电子表格
- python - 连接具有多个值组件的两个 RDD 并将结果展平
- javascript - MomentJS 获取相对于今天的先前日期
- node.js - 无法在浏览器中连接到我的节点服务器,但 curl 有效