在 react-native-calendar 上添加网格 [英] Adding grid on react-native-calendars

问题描述

我在我的应用程序中使用 react-native-calendars 库和自定义日组件.最后要添加的是网格，我试图添加一个边框，但外观不太好:水平边框之间仍有空间，垂直边框重叠并显得更粗.代码如下:

I am using the react-native-calendars library in my app with a custom day component. Last thing to add is grid, I've tried to add a a border but the appearance is not ok: there's still a space between horizontal borders and the vertical borders overlap an appear thicker. Here is the code:

// 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>

这是我得到的结果

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

How can I have the result below (only the grid) ?

推荐答案

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

You can afford that modifying the theme property inside the Calendar component with the following code:

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，但如果发生崩溃，您将无法获得支持，请自行承担风险.

The idea is to modify the preexistent styling of the components inside the calendar. You will have to find the specific ID for the component that you want to modify, but if something crashes you will not be supported on that, do it under your own risk.

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

You could find all components/styles on the repository. In my case just to show you an example I'm modifying these at the Calendar component:

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

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

还有其他定制的东西(比如 标题样式，其中日期以黑色和全长显示)但看起来像这样:

And there are another customized things(like header styling, where days are displayed in black and full-length) but it looks like that:

自定义网格:

Customized grid:

这篇关于在 react-native-calendar 上添加网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！