Wie erstellen Sie Auswahl-slider? (reagieren-native)

Dies ist mein bereichsschieberegler

Aber für eine änderung der Werte Benutzer klicken müssen, um auf diesen Wert. Wie zu machen, um in der Lage sein, ziehen Sie den Schieberegler? Danke.

InformationsquelleAutor Maksim | 2016-02-17
  1. 2

    Werden Sie verwenden möchten PanResponder. Überprüfen Sie heraus die UIExplorer demo für PanResponder.
    http://www.reactnative.com/uiexplorer/

    InformationsquelleAutor Chris Geirman
  2. 14

    Wenn ich du wäre, ohne jeden Zweifel, ich würde Suche für eine Bibliothek zu tun, die schweres heben für mich.

    Vorausgesetzt, Sie müssen cross-Plattform (iOS und Android) Auswahl-slider-Lösung, basierend auf meiner Forschung, die von der Zeit des Schreibens dieser Antwort, das plugin, das gab die besten Ergebnisse in Bezug auf die performance auf beiden Plattformen-und Anpassungsmöglichkeiten Optionen ist @ptomasroos/reagieren-native-multi-slider.

    Es fehlt eine gute Dokumentation, aber es ist Beispiel. Hier ist die Basis-set-up:

    import React from 'react';
import { View, Text } from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';

class RangeSlider extends React.Component {
    state = {
        values: [3, 7],
    };

    multiSliderValuesChange = (values) => {
        this.setState({
            values,
        });
    }

    render() {
        return (
            <View>
                <MultiSlider
                    values={[this.state.values[0], this.state.values[1]]}
                    sliderLength={280}
                    onValuesChange={this.multiSliderValuesChange}
                    min={0}
                    max={10}
                    step={1}
                />
                <Text style={styles.text}>Two Markers:</Text>
                <Text style={styles.text}>{this.state.values[0]}</Text>
                <Text style={styles.text}>{this.state.values[1]}</Text>
            </View>
        )
    }
}
    • Es ist eine schöne Lösung-code, ich danke Ihnen für den Austausch.
    InformationsquelleAutor Kaloyan Kosev
  3. 2

    Den Schöpfer reagieren-native-range-regler ist hier!

    Können Sie dieses Modul verwenden, das ist nativ implementiert und dann portiert zu reagieren,-Muttersprachler, damit die große Leistung und flüssige Animationen.

    hier ist ein Beispiel:

    import RangeSlider from 'react-native-range-slider'

<View style={{flex: 1, flexDirection: 'row'}}>
  <RangeSlider
    minValue={0}
    maxValue={100}
    tintColor={'#da0f22'}
    handleBorderWidth={1}
    handleBorderColor="#454d55"
    selectedMinimum={20}
    selectedMaximum={40}
    style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
    onChange={ (data)=>{ console.log(data);} }
  />
</View>

    Ist die einzige Einschränkung und Nachteil hier ist, dass es nur für iOS(derzeit).

    • ist das nur für iOS?
    • Derzeit ja .
    • irgendeine Idee, wie können wir verwenden strings in Wert?
    • wenn du redest, Parsen von strings in zahlen um, dann können Sie Number(str).
    • es ist wie, ich will minValue={"Niedrig"}. es wirft Fehler ,
    • verwenden minValue={Number('min number string')}

    InformationsquelleAutor ismnoiet
Schreibe einen Kommentar