So ändern Sie die switch-Komponente, Größe, Reagieren die Einheimischen?

So ändern Sie die switch-Komponente, Größe, Reagieren die Einheimischen?

<Switch onValueChange={this._changeReciveNotice.bind(this)}
        value={this.state.isReciveNotice}
        style={{width:20,height:10}}/>

dieser Stil-code nicht Effekt

InformationsquelleAutor alucard.g | 2016-09-21
  1. 54

    Können Sie die Größe des Schalters mit der transform-Eigenschaft von styling,

    <Switch value={true}
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
onValueChange={(value) => {}} />

    auch für das beste Ergebnis bestimmen die Skalierung Werte basieren auf dem Bildschirm dimension.

    • Schön gemacht! Funktioniert Super.
    • Ja, hatte dieses Problem selbst und habe mit dieser Methode zum Maßstab für alle android-und iOS-Geräte.
    • arbeitete für mich, wie gut!
    InformationsquelleAutor Eltaf
  2. 2

    Ergänzen, was war schon sagte, dies ist, wie Sie behandeln können-Bildschirmgröße:

    import { moderateScale } from 'react-native-size-matters';

...

<Switch 
   style={{ transform: [{ scaleX:  moderateScale(1, 0.2) }, { scaleY:  
   moderateScale(1, 0.2) }] }} />
    InformationsquelleAutor TacoEater
  3. -1
            <View
      style={{
        backgroundColor: this.state.value
          ? "rgba(81, 195, 157, 0.16)"
          : "rgba(204, 204, 204, 0.16)",
        borderRadius: 50,
        paddingVertical: 2,
        paddingHorizontal: 4
      }}
    >
      <Switch
        tintColor="transparent"
        thumbTintColor={this.state.value ? "#51c39d" : "#cccccc"}
        onTintColor="transparent"
        value={this.state.value}
        style={{ transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }] }}
        onValueChange={value => this.setState({ value })}
      />
    </View>
    • Eine Erklärung zu dem code wäre schön
    • Es ist nur ein Weg, um das anpassen der switch-Komponente.
    • Das ist nicht eine Erklärung des Codes. Sie sollten sagen, wie Sie das anpassen der switch-Komponente, um eine bessere Antwort. Die anderen Antworten zu dieser Frage kann Ihnen ein Beispiel geben, wie erklären Sie Ihren code.
    InformationsquelleAutor Emad Hajjar
  4. -4

    Müssen Sie ändern Sie den Status-Wert.

    exemple:

    <Switch
    onValueChange={(value) => this.setState({isReciveNotice: value})}
    style={{marginBottom: 10}}
    value={this.state.isReciveNotice} />

    Ich glaube nicht, dass Sie stilisieren einer Switch-Komponente.

    InformationsquelleAutor Alexandre Teixeira
Schreibe einen Kommentar