Преобразование 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, который обновляет только HourRectangles и 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    |
|         |                         |           |
|          -------------------------            |
 -----------------------------------------------

0 ответов

Другие вопросы по тегам