[英]React-native - How to create a infinite picker
我想創建一個無限/循環 react-native Picker,如下圖所示。
所以,我的問題是:當我滾動時,如何讓 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})
}
}
並在減速器中:
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,
}
},
})
然后將您的組件與減速器連接起來,更新應該是自動的:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.