Dynamisch formatierte Schaltfläche in Reactive Native mit gestylten Komponenten

Question

Eine Button-Komponente besteht im Allgemeinen aus dem Text-Element, das mit einem TouchableHighlight (oder einem anderen touchable) umschlossen ist. Ich versuche, eine Button-Komponente zu erstellen, die mit styled-components formatiert ist, habe aber Probleme, meinen Stil dynamisch auf Requisiten reagieren zu lassen.

Button-Komponente

Unten habe ich eine Button-Komponente ähnlich der in den Stil-Komponenten-docs gefunden Adapting based on props Beispiel erstellt.

import React from 'react'; 
import { Text, TouchableHighlight } from 'react-native'; 
import styled from 'styled-components/native'; 

const colors = { 
    accent: '#911', 
    highlight: '#D22', 
    contrast: '#FFF', 
} 

const Label = styled.Text` 
    color: ${props => !props.outline ? colors.contrast : colors.accent}; 
    font-weight: 700; 
    align-self: center; 
    padding: 10px; 
` 

const ButtonContainer = styled.TouchableHighlight` 
    background-color: ${props => props.outline ? colors.contrast : colors.accent}; 
    width: 80%; 
    margin-top: 5px; 
    border-color: ${colors.accent}; 
    border-width: 2px; 
` 

const Button = (props) => { 
    return (
     <ButtonContainer 
      onPress={props.onPress} 
      underlayColor={colors.highlight} 
     > 
      <Label> 
       {props.children} 
      </Label> 
     </ButtonContainer> 
    ); 
}; 

export default Button; 

Knopf Nutzungs

Nach dem Import, ich bin auf die Schaltfläche wie folgt aus ...

<Button 
     outline 
     onPress={() => console.log('pressed')}> 
     Press Me! 
    </Button> 

Erwartetes Ergebnis

Und so würde ich meine Taste erwarten so aussehen ...

Tatsächliches Ergebnis

Aber stattdessen sieht es so aus ...

Was ich bisher

zu beheben gemacht, wenn ich react-devtools inspect verwenden, kann ich sehen, dass die outline prop wird an die Komponente Button weitergegeben.

Aber die Stütze ist nicht auf irgendetwas davon Kinder

Der Passed Props Teil des docs Zustand „Stil-Komponenten weitergeben all ihre Requisiten“ überliefert, aber Ich denke nicht den ganzen Weg hinunter?

Meine Frage

Was muss ich ändern, so dass ich meine dynamisch Knopf auf seine Requisiten basierten Stil kann?

Answer 1

Hier haben Sie:

const Button = (props) => { 
    return (
     <ButtonContainer underlayColor={colors.highlight}> 
      <Label> 
       {props.children} 
      </Label> 
     </ButtonContainer> 
    ); 
}; 

Wenn ButtonContainer war ein normaler Bestandteil reagieren, würden Sie nicht erwarten, dass die props zu Button weitergegeben werden automatisch an ButtonContainer weitergegeben. Sie müssen <ButtonContainer underlayColor={colors.highlight} {...props} /> tun, um es zu tun.

Eigentlich ButtonContainer ist eine normale React-Komponente, der einzige Unterschied ist, dass Sie einige Stile mit einem HOC vorverlegen.

Auch wenn Sie dies zu einem React.createElement Anruf entschuldigen, können Sie sehen, es gibt keine Möglichkeit props kann automatisch übergeben werden, weil die Argumente einer Funktion nicht automatisch an die Funktionsaufrufe innerhalb es übergeben werden.

const Button = (props) => { 
    return React.createElement(ButtonContainer, { underlayColor: colors.highlight }, ...); 
}; 

Es ist nichts spezifisch für styled-components. Sie müssen nur die Requisiten selbst an ButtonContainer, sowie an Label weiterleiten.

So sollten Sie Ihren Code neu schreiben zu:

const Button = (props) => { 
    return (
     <ButtonContainer underlayColor={colors.highlight} onPress={props.onPress} outline={props.outline}> 
      <Label outline={props.outline}> 
       {props.children} 
      </Label> 
     </ButtonContainer> 
    ); 
}; 

eine Technisch Komponente reagieren kann Requisiten überliefern, um es Kinder ist, so könnte ButtonContainer sie überliefern zu LabelReact.Children und React.cloneElement APIs. Aber das tut ButtonContainer aus offensichtlichen Gründen nicht, z.B. Sie möchten nicht, dass underlayColor und onPress automatisch an Label übergeben werden. Es würde viele verwirrende Fehler verursachen.