reactjs - 反应本机日历

Question

描述

我今天才开始使用这个组件，但实现似乎不像 demo/examples/docs 显示的那样工作。

预期行为

我原以为从 2018-12-10 到 2018-12-15 的日子会被绿色填满，包括中间的日子。

观察到的行为

现实情况是，这两天都被绿色填满，但中间的日子没有任何事情发生（它们没有连接）。

环境

• “反应原生”：“0.57.4”，
• “反应本机日历”：“^1.21.0”
• 测试：红米 Note 4 (Android 7.0)

可重现的演示

这是我日历的代码：

<Calendar
     markedDates={{
                "2018-12-10": { startingDay: true, color: "green" },
                "2018-12-15": { endingDay: true, color: "green" }
        }}

       markingType='period'
  />

标签： reactjsreact-nativereact-native-calendars

Answer 1

该解决方案是在 JavaScript 中实现的，因此不需要本地模块链接。

您应该需要通过 npm install react-native-calendars 安装“react-native-calendars”。

在此解决方案中，您可以获得当前日期，并且事件详细信息将根据日期显示。

这是文档链接

import { ExpandableCalendar, Timeline, CalendarProvider } from 'react-native-calendars';

const App = () => {

const [currentDate,setCurrentDate]=useState("");
const onDateChanged = (date) => {setCurrentDate(getCurrentDate())};
const onMonthChange = (/* month, updateSource */) => {
    // console.warn('ExpandableCalendarScreen onMonthChange: ', month, updateSource);
};
const renderItem = ({ item }) => {if (_.isEmpty(item)) {return renderEmptyItem();}}

const renderEmptyItem=()=> {
    return (
        <View style={{paddingLeft: 20, height: 52, justifyContent: 'center', borderBottomWidth: 1, borderBottomColor: '#e8ecf0'}}>
            <Text style={{color: '#79838a',fontSize: 14}}>No Events Planned</Text>
        </View>
    );
}
const getMarkedDates = () => {
    const marked = {};
    EVENTS.forEach(item => {marked[item.start.split(' ')[0]] = { marked: true, dotColor: item.color }});
    return JSON.parse(JSON.stringify(marked));
};
const getTheme = () => {
    const themeColor = Colors.black;
    const lightThemeColor = Colors.primary;
    const disabledColor = '#a6acb1';
    const black = Colors.black;
    const white = Colors.white;
    const themeBack = Colors.primary;
    const Black1 = Colors.primary
    return {
        // arrows
        arrowColor: Black1, arowStyle: { padding: 0 },
        // month
        monthTextColor: Black1, textMonthFontSize: 16, textMonthFontFamily: 'HelveticaNeue', textMonthFontWeight: 'bold',
        // day names
        textSectionTitleColor: black, textDayHeaderFontSize: 14, textDayHeaderFontFamily: 'HelveticaNeue', textDayHeaderFontWeight: 'bold',
        // today
        todayBackgroundColor: lightThemeColor, todayTextColor: themeColor,
        // dates
        dayTextColor: themeColor, textDayFontSize: 18, textDayFontFamily: 'HelveticaNeue', textDayFontWeight: '500', textDayStyle: { marginTop: Platform.OS === 'android' ? 2 : 4 },
        // selected date
        selectedDayBackgroundColor: themeBack, selectedDayTextColor: white,
        // disabled date
        textDisabledColor: disabledColor,
        //   dot (marked date)
        dotColor: themeColor, selectedDotColor: white, disabledDotColor: disabledColor, dotStyle: { marginTop: -2 }
    };
};

return (
    <SafeAreaView style={{flex: 1}}>
        <ScrollView>
            <View>
                 <CalendarProvider
                        date={currentDate}
                        onDateChanged={onDateChanged}
                        onMonthChange={onMonthChange}
                        theme={{ todayButtonTextColor: '#0059ff' }}
                        renderItem={renderItem}
                        disabledOpacity={0.6}>
                        <ExpandableCalendar
                                firstDay={1}
                                markedDates={EVENTS.color}
                                markingType={'dot'}
                                markedDates={getMarkedDates()}
                                theme={getTheme()}
                                headerStyle={{paddingHorizontal:20}}
                        />
                        <Timeline
                                format24h={true}
                                eventTapped={(e) => {console.log(e);} }
                                events={EVENTS.filter(event => 
                        moment(event.start).isSame(currentDate, 'day'))}
                        />
                    </CalendarProvider>
            </View>
        </ScrollView>
    </SafeAreaView>
       )}
export default App;

希望这会有所帮助。