我想创建一个无限/循环 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>
);
}
最佳答案
创建 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 连接起来,更新应该是自动的:)
关于javascript - React-native - 如何创建一个无限选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45655437/