首页 > 解决方案 > 在本机反应中设置状态以立即由日历条读取的问题

问题描述

我目前正在使用 react-native-calendar-strip,它显示一个水平/线性/周历,不管你怎么称呼它,我的想法是点击特定的一天并突出显示它,但是这个组件的工作方式,它将高亮样式和白天样式分开。

            const [isToday, setToday] = useState(false)

            <CalendarStrip
              useIsoWeekday={false}
              startingDate={fecha}
              showMonth={false}
              calendarHeaderContainerStyle={
                styles.calendarHeaderContainerStyle
              }
              calendarColor={'#FFFFFF'}
              style={styles.calendarStripContainer}
              daySelectionAnimation={{
                type: 'background',
                highlightColor: '#F8F8F8',
                duration: 300,
              }}
              onDateSelected={async (date) => {
                updateState(date);
                DataManager.FechaActual = Moment(date).format('YYYY-MM-DD');
                await setFechaActual();
              }}
              dateNumberStyle={styles.calendarStripMediumText}
              dateNameStyle={styles.calendarStripLowText}
              highlightDateNumberStyle={[
                styles.enabledDate,
                {color: isToday ? '#212B42' : '#8E9CB4'},
              ]}
              highlightDateNameStyle={[
                styles.enabledDate,
                {color: isToday ? '#212B42' : '#8E9CB4'},
              ]}
              disabledDateNameStyle={styles.disabledDate}
              disabledDateNumberStyle={styles.disabledDate}
              customDatesStyles={customDatesStylesFunc}
              disabledDateOpacity={1}
              leftSelector={[]}
              rightSelector={[]}
              iconContainer={{flex: 0.1}}
            />

我的 isToday const 以 false 开头,每当我点击某一天时,它会将当前日期与 momentjs 上的选定日期进行比较,如果结果为 true,则挂钩状态将发生变化,并且对应的 highlightDateNumberStyle 将显示新样式那天。

问题是,钩子状态总是在颜色变化之后,据我所知,这是由于状态异步性质,虽然这部分代码不起作用,但我尝试了 8 或 9 种解决方案,但我真的没有不知道这是否可能。

              onDateSelected={async (date) => {
                updateState(date);
                DataManager.FechaActual = Moment(date).format('YYYY-MM-DD');
                await setFechaActual();
              }}

这是我在 onDateSelected 中调用的函数。

              function updateState(date: any) {
                var hoy = Moment(horaActual).isSame(Moment(date), 'days');
                setToday(hoy);
              }

标签: javascripttypescriptreact-native

解决方案


推荐阅读