react-native - 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 本身的文本组件

所以样式代码会更像:

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

JSX 代码更像:

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

</CalcButton>