Конвертировать MaterialTopTabNavigator в область смахивания - PullRequest
0 голосов
/ 23 марта 2020

Я новичок в 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    |
|         |                         |           |
|          -------------------------            |
 -----------------------------------------------
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...