React-native - So erstellen Sie eine unendliche Picker

Question

Ich möchte eine endlose/Schleife reaktions-native Picker wie auf dem Bild unten erstellen.

Also, meine Frage ist: Wenn ich Scrollen, wie kann ich die Picker wieder machen beginnen ab dem ersten Punkt nach dem letzten Punkt erreichen?

Hier ist mein 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

Redux Aktion erstellen, den Wert der Minuten und Stunden erhöhen. Innerhalb dieser Aktion können Sie prüfen, ob es zurückgesetzt werden soll, zum Beispiel:

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

und im Minderer:

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

dann Komponente mit dem Druckminderer anschließen und das Update sollte automatisch sein :)