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 的按钮样式。

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

title 属性将被 React-Native 本身的 Text 组件替换

所以样式代码会更像：

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

JSX 代码将更像：

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

</CalcButton>