Я новичок в React Native и разработке для мобильных устройств, поэтому, пожалуйста, будьте осторожны, оценивая мой вопрос:)
Я создал календарь, используя createMaterialTopTabNavigator
из react-navigation-tabs
, где каждая страница моего навигатора соответствует просмотру недели (у меня 4 недели, но давайте возьмем 2 в качестве примера):
const screens = {
CurrentWeek: {
screen: props => (
<WeekScreen
{...props}
weekDays={_getWeekDays(0)}
times={_createCalendarTimes()}
weekNumber="0"
/>
),
},
Week2: {
screen: props => (
<WeekScreen
{...props}
weekDays={_getWeekDays(1)}
times={_createCalendarTimes()}
weekNumber="1"
/>
),
}
}
const ScheduleNavigator = createMaterialTopTabNavigator(screens, commonConfigs);
export default ScheduleNavigator;
Мой WeekScreen выглядит следующим образом (очень упрощенная версия):
render() {
return (
<View style={styles.container}>
{/* print M,T,W,T,F,S,S on top */}
<Weekdays/>
<ScrollView>
<View>
{/* print the hours on the left */}
<Hours/>
{this.props.weekDays.map(date => ( <HourRectangle/> ))}
</View>
</ScrollView>
</View>
);
}
Что Я хотел бы сделать и не знаю, как / если просто конвертировать страницы в одну страницу, и сделать WeekScreen
a WeekArea
, который обновляет только HourRectangle
s и Weekdays
, когда мы проводим на следующую / предыдущую неделю.
Спасибо!
Бонус: это внутри другого перелистываемого навигатора, поэтому в идеале я мог бы только провести пальцем по самому календарю внутри меньшей области, но я не уверен, если это возможно:
-----------------------------------------------
| ------------------------- |
| N | | |
| A | | |
| V | | N |
| I | | A |
| G | | V |
| A | | I |
| T | | G |
| E | | A |
| | <- NAVIGATE WEEKS -> | T |
| A | | E |
| P | | |
| P | | A |
| | | P |
| | | P |
| | | |
| ------------------------- |
-----------------------------------------------