React-native — Как создать бесконечное средство выбора

Я хотел бы создать бесконечный/циклический ответный сборщик, как на изображении ниже.

введите здесь описание изображения

Итак, мой вопрос: когда я прокручиваю, как я могу снова начать сборщик с первого элемента после достижения последнего элемента?

Вот мой код:

render() {
  const hourItems = [];
  for(var i = 0; i < 24; i++) {
    hourItems.push(
      <Picker.Item label={i.toString()} value={i} key={i} />
    );
  }

  return(
    <ScrollView style={styles.panel}>
      <Picker
        selectedValue={this.state.hour}
        onValueChange={(itemValue, itemIndex) => this.setState({ hour: itemValue })}
      >
        {hourItems}
      </Picker>
    </ScrollView>
  );
}

react-native javascript picker
person Nelio    schedule 12.08.2017    source источник
comment
Я думаю, вам следует уточнить свой вопрос. С чем именно у Вас проблема? Вы не знаете, как сделать бесконечный цикл или как разработать приложение, чтобы оно соответствовало вашему экрану?   -  person mkatanski    schedule 13.08.2017
comment
Когда я прокручиваю, как я могу снова начать сборщик с первого элемента после достижения последнего элемента?   -  person Nelio    schedule 13.08.2017
comment
хорошо, смотрите мой ответ ниже   -  person mkatanski    schedule 13.08.2017

Ответы (1)


arrow_upward
-1
arrow_downward

Создайте избыточное действие, которое увеличивает значение минут и часов. Внутри этого действия вы можете проверить, следует ли его сбросить, например:

export const tick = () => (dispatch, getState) => {
   const { minute } = getState().clock
   if (minute === 59) {
     dispatch({ type: RESET_MINUTE})
     dispatch({ type: INCREMENT_HOUR})
   } else {
     dispatch({ type: INCREMENT_MINUTE})
   }
}

и в редукторе:

const createReducer = (initialState, handlers) =>
  (state = initialState, action) => {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    }
    return state
  }

export default createReducer(initialState, {
  INCREMENT_HOUR(state, action) {
    return {
      ...state,
      hour: state.hour + 1,
    }
  },
  INCREMENT_MINUTE(state, action) {
    return {
      ...state,
      minute: state.minute + 1,
    }
  },
  RESET_MINUTE(state) {
    return {
      ...state,
      minute: 0,
    }
  },
})

затем подключите свой компонент к редьюсеру, и обновление должно быть автоматическим :)

person mkatanski    schedule 12.08.2017
comment
1. Использование избыточности совершенно не нужно, добавленное усложнение 2. Это не создает пользовательский интерфейс, о котором просил спрашивающий. - person Katie; 04.11.2019
comment
@ Кэти, нет, пожалуйста, прочитайте его вопрос еще раз. Он спрашивает не о том, как создать пользовательский интерфейс, а о том, как заставить его работать таким образом. Я согласен, что сегодня redux не нужен, на самом деле я бы рекомендовал использовать хуки, но более двух лет назад это было лучшее решение для управления состоянием в приложении. - person mkatanski; 20.11.2019