将 scrollable 设置为 true 时 CalendarStrip 样式发生变化答案

【问题标题】：CalendarStrip Style changes when setting scrollable to true将 scrollable 设置为 true 时 CalendarStrip 样式发生变化
【发布时间】：2022-12-22 22:57:46
【问题描述】：

所以我正在从 react-native-calendar-strip 制作一个 CalendarStrip。基本上，当我在 CalendrStrip 中将可滚动设置为 true 时，条带的高度会缩短并破坏 CalendarStrip 的外观。

所以这是 CalendarStrip 没有将 scrollable 设置为 true。

这是我将 scrollable 设置为 true 的时候。如您所见，Strip 的高度降低了，这就是突出显示的日期被截断的原因。我不明白为什么会这样。

<View style={styles.listContainer}>
<CalendarStrip
            scrollable={true}
            scrollToOnSelectedDate={true}
            ref={calenderRef}
            headerText={' '}
            selectedDate={newdate}
            onDateSelected={value => {
              setDate(moment(value).format('YYYY-MM-DD'));
              setSelectedMonth(value.month());
              setSelectedYear(value.year());
              console.log(newdate);
            }}
            getSelectedDate={value => console.log(value)}
            daySelectionAnimation={{
              type: 'border',
              duration: 200,
              borderWidth: 1,
              borderHighlightColor: 'white',
            }}
            calendarHeaderStyle={{
              fontSize: 1,
              fontFamily: 'Roboto-Regular',
              color: 'black',
              alignSelf: 'flex-start',
            }}
            //   iconLeftStyle={{position:"absolute",top:-70}}
            //  iconRightStyle={{color:'white',backgroundColor:colors.primaryTheme,}}
            style={{
              width: '98%',
              height: 150,
              paddingTop: 20,
              paddingBottom: 10,
            }}
            startDate={moment(date)}
            highlightDateContainerStyle={{
              backgroundColor: colors.secondary,
              paddingVertical: 10,
              height: 80,
              color: 'white',
            }}
            dayContainerStyle={{paddingVertical: 10}}
            highlightDateNumberStyle={{
              color: colors.white,
              fontFamily: 'Roboto-Medium',
              fontSize: 14,
            }}
            highlightDateNameStyle={{
              color: colors.white,
              fontFamily: 'Roboto-Medium',
              fontSize: 12,
              marginHorizontal: 1.5,
              padding: 5.5,
              borderTopEndRadius: 20,
              borderTopLeftRadius: 20,
              borderTopRightRadius: 20,
            }}
            highlightDateNumberContainerStyle={{
              backgroundColor: colors.primaryTheme,
              borderRadius: 40,
              padding: 4,
              marginHorizontal: 10,
              minWidth: 30,
              minHeight: 30,
            }}
          />
        </View>

【问题讨论】：

标签： javascript android react-native

【解决方案1】：

你找到答案了吗？

【讨论】：