reactjs - 用全圆角反应本机日历周期标记

Question

请参考下面的日历图片。

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

请忽略点标记只考虑带有句点标记的开始和结束日期

但是，我只用周期标记实现了一半的开始和结束日期。请参考下图。

现在我需要用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
            }
        }
}