javascript - React-native - 如何创建一个无限选择器

Question

我想创建一个无限/循环 react-native Picker，如下图所示。



所以，我的问题是:
当我滚动时，如何让选择器在到达最后一项后从第一项重新启动？

这是我的代码:

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>
  );
}

Answer 1

创建 redux 操作，增加分钟和小时的值。在该操作中，您可以检查是否应重置它，例如:

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})
   }
}

并在 reducer 中:

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,
    }
  },
})

然后将您的组件与 reducer 连接起来，更新应该是自动的:)