React native 在本机日历上添加网格

我正在我的应用程序中使用带有自定义日期组件的react native calendars库。最后要添加的是网格，我尝试添加一个边框，但外观不太好：水平边框和垂直边框之间仍然有一个空间重叠，看起来更厚。 代码如下：

// calendar screen
      <View>
        <CalendarList
          onVisibleMonthsChange={months => {
            // console.log('now these months are visible', months);
          }}
          firstDay={1}
          pastScrollRange={0}
          futureScrollRange={50}
          scrollEnabled
          showScrollIndicator={false}
          markedDates={markedDates}
          theme={{
            'stylesheet.calendar.main': {
              monthView: {
                backgroundColor: colors.grey30,
              },
              week: {
                flexDirection: 'row',
                justifyContent: 'space-around',
                backgroundColor: '#fff',
                // margin: 1,

                // borderBottomWidth: 1,
                // borderBottomColor: colors.grey30,
              },
            },

            'stylesheet.calendar.header': {
              header: {
                borderWidth: 0,
                paddingTop: 10,
                marginLeft: 10,
                ...globalStyles.regular,
              },
              monthText: {
                alignSelf: 'stretch',
                textAlign: 'left',
              },
              week: {
                marginTop: 7,
                flexDirection: 'row',
                justifyContent: 'space-around',
              },
            },
            textDayFontFamily: 'source-sans-pro-bold',
            textMonthFontFamily: 'source-sans-pro',
            textDayHeaderFontFamily: 'source-sans-pro-light',
            textDayFontSize: 14,
            // textMonthFontSize: 16,
            // textDayHeaderFontSize: 16
          }}
          dayComponent={({ date, state }) => {
            const dayMissions = missionsByDay ? missionsByDay[`${date.dateString}`] : null;
            const isNextMissionDay =
              missions && missions.length && missions[0].dateString === date.dateString;

            return (
              <DayComponent
                onPress={() => this.onDayPress(dayMissions, date.dateString)}
                isToday={isDateToday(date.dateString)}
                missions={dayMissions}
                date={date}
                state={state}
                isNextMissionDay={isNextMissionDay}
              />
            );
          }}
        />
      </View>

//日历屏幕
{
//log（“现在这些月份可见”，月份）；
}}
第一天={1}
pastScrollRange={0}
未来滚动范围={50}
滚动启用
showScrollIndicator={false}
markedDates={markedDates}
主题={{
'stylesheet.calendar.main'：{
蒙特维尤：{
背景颜色：颜色。灰色30，
},
周：{
flexDirection:'行'，
为内容辩护：“周围的空间”，
背景颜色：“#fff”，
//差额：1，
//边界宽度：1，
//borderBottomColor:颜色。灰色30，
},
},
'样式表.日历.标题'：{
标题：{
边框宽度：0，
paddingTop:10，
边缘左：10，
…全球风格，常规，
},
月文字：{
自我定位：“拉伸”，
textAlign:'左'，
},
周：{
玛金托普：7，
flexDirection:'行'，
为内容辩护：“周围的空间”，
},
},
textDayFontFamily:“源sans pro bold”，
textMonthFontFamily:“源SAN pro”，
textDayHeaderFontFamily:“光源无专业光源”，
textDayFontSize:14，
//textMonthFontSize:16，
//textDayHeaderFontSize:16
}}
dayComponent={（{date，state}）=>{
const dayMissions=missionsByDay？missionsByDay[`${date.dateString}`]：null；
const isNextMissionDay=
missions&&missions.length&&missions[0]。日期字符串===date.dateString；
返回(
this.onDayPress（dayMissions，date.dateString）}
isToday={isDateToday（date.dateString）}
任务={dayMissions}
日期={date}
state={state}
isNextMissionDay={isNextMissionDay}
/>
);
}}
/>

//DayComponent
{missions&&missions.length>1&&(
{missions.length}
)}
{missions&&missions.length>0&&(
)}
{！任务&&(
{date.day}
)}

这是我得到的结果

如何获得下面的结果（仅网格）

---

您可以使用以下代码修改日历组件内的主题属性：

theme={{
        'stylesheet.calendar.main': {
          dayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          emptyDayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          week: {
            marginTop: 0,
            marginBottom: 0,
            flexDirection: 'row',
            justifyContent: 'space-around'
          },
        }
      }}

这样做的目的是修改日历中先前存在的组件样式。您必须找到要修改的组件的特定ID，但如果某个组件崩溃，您将不受支持，请自行承担风险

您可以在存储库中找到所有组件/样式。在我的例子中，我只是向您展示一个示例，我正在日历组件中修改这些：

（id='stylesheet.calendar.main'）

还有另外一个定制的东西（比如，天数以黑色和全长显示），但看起来是这样的：

自定义网格：

---

我不知道答案，但我得到答案是因为你。谢谢大家!@BhavyaKhurjawal我可以知道，由于这个问题，你解决了什么问题吗？@Ceashore你找到解决这个问题的办法了吗？如果你能和我分享，那将是非常有帮助的。嗨@Vipul。不幸的是我没有这个机会。由于新冠病毒，该项目已停止。很抱歉

theme={{
        'stylesheet.calendar.main': {
          dayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          emptyDayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          week: {
            marginTop: 0,
            marginBottom: 0,
            flexDirection: 'row',
            justifyContent: 'space-around'
          },
        }
      }}