React-native - Comment créer un sélecteur infini

Question

Je voudrais créer un Picker infini/loop reac-native comme sur l'image ci-dessous.

Alors, ma question est: Quand je défilement, comment puis-je faire à nouveau démarrer le sélecteur du premier élément après atteindre le dernier élément?

Voici mon code:

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

Créer action Redux la valeur d'incrément des minutes et des heures. A l'intérieur cette action, vous pouvez vérifier si elle doit être remis à zéro, par exemple:

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

et réducteur:

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

puis connectez votre appareil avec le réducteur et la mise à jour devrait être automatique :)