用完整的圆角反应本机日历周期标记

Question

请参考下面的日历图片。

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

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

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

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

Answer 1

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

转到此文件。 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
            }
        }
}

用完整的圆角反应本机日历周期标记

React Native Calendar Period Marking with Full Round Corners

reactjs

react-native

react-native-android

react-native-ios

react-native-calendars