Преобразование MaterialTopTabNavigator в прокручиваемую область
Я новичок в 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
а 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 |
| | | |
| ------------------------- |
-----------------------------------------------