react-native - 在 react-native-calendars 上添加网格

Question

我在我的应用程序中使用带有自定义日期组件的 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>

// DayComponent

    <TouchableOpacity
      onPress={onPress}
      style={{
        height: dayWidth,
        width: dayWidth,
        justifyContent: 'center',
        alignItems: 'center',
        // borderWidth: 1, //isToday ? 1 : 0,
      }}>
      {missions && missions.length > 1 && (
        <Text
          style={{
            position: 'absolute',
            right: 2,
            top: 2,
            width: 14,
            height: 14,
            borderRadius: 7,
            backgroundColor: '#000',
            color: '#fff',
            fontSize: 10,
            textAlign: 'center',
            textAlignVertical: 'center',
            overflow: 'hidden',
          }}>
          {missions.length}
        </Text>
      )}
      {missions && missions.length > 0 && (
        <BalaiIcon
          tintColor={isNextMissionDay ? colors.orange : colors.black}
          width="26"
          height="26"
        />
      )}
      {!missions && (
        <Text
          style={{
            textAlign: 'center',
            color: state === 'disabled' ? 'gray' : 'black',
          }}>
          {date.day}
        </Text>
      )}
    </TouchableOpacity>

这是我得到的结果

我怎样才能得到下面的结果(只有网格)？

Answer 1

您可以使用以下代码修改 Calendar 组件内的 theme 属性:

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，但如果出现崩溃，您将不受支持，风险自负。

您可以在存储库中找到所有组件/样式。就我而言，只是为了向您展示一个示例，我在日历组件中修改了这些:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/style.js (id='stylesheet.calendar.main')

还有另一个自定义的东西(比如 header styling ，其中日期以黑色和全长显示)但它看起来像这样:

自定义网格: