React Native - 使用样式化组件样式化按钮

Question

我创建了一个带有样式组件的按钮，但样式不适用。我尝试了样式表，但它也不起作用。

如何设置此按钮的样式？

样式化组件区：

const CalcButton = styled.Button`
  margin-top:10px;
`;

我的功能：

 return (
    <Page>
      <HeaderText>Calculadora de Gorjeta</HeaderText>
      <Input
        placeholder="Quanto deu a conta?"
        keyboardType="numeric"
        value={bill}
        onChangeText={n=>setBill(n)}
      />
      <PctArea>
        <PctItem title="5%"  onPress={()=>setPct(5)}/>
        <PctItem title="10%" onPress={()=>setPct(10)}/>
        <PctItem title="15%" onPress={()=>setPct(15)}/>
        <PctItem title="20%" onPress={()=>setPct(20)}/>
      </PctArea>
      <CalcButton
        title={`Calcular ${pct}%`}
        onPress={calc}
      />
      {tip > 0 &&
        <ResultArea>
          <ResultItemTitle>Valor da Conta</ResultItemTitle>
          <ResultItem>R$ {parseFloat(bill).toFixed(2)}</ResultItem>

          <ResultItemTitle>Valor da Gorjeta</ResultItemTitle>
          <ResultItem>R$ {tip.toFixed(2)} ({pct}%)</ResultItem>

          <ResultItemTitle>Valor Total</ResultItemTitle>
          <ResultItem>R$ {(parseFloat(bill) + tip).toFixed(2)}</ResultItem>
        </ResultArea>
      }
    </Page>

Answer 1

首先，我建议更改为 TouchableOpacity 设置样式的 Button。

TouchableOpacity 样式更像是一个 div 而不是一个按钮，所以当你设计它时你必须考虑一个 div。

标题属性将被替换为 React-Native 本身的 Text 组件

所以样式代码会更像：

const CalcButton = styled.TouchableOpacity`
  `Your style`
`;

而且 JSX 代码会更像：

<CalcButton>
   <Text>What ever you want</Text>

</CalcButton>