React-Native自定义按钮

Question

如何创建该按钮？

我尝试了wix ui lib，我能够获得边框半径和阴影，但我无法为背景设置渐变。 我的第二种方法是将按钮（svg）的设计文件导出到png并将其传递给<ImageBackground />，但就错误的大小而言看起来非常难看。但即使我以非常大的格式导出它，它看起来也很愚蠢，所以这对我来说不是一个选择。有人可能知道怎么做到这个吗？

Answer 1

尝试围绕此库包装按钮

https://github.com/react-native-community/react-native-linear-gradient

试试此代码

<LinearGradient colors={['#Color1', '##Color2', '##Color3']}
style={styles.YourPaddingStyle} 
          start={{ y: 0.0, x: 0.0 }}
          end={{ y: 0.0, x: 1.0 }}>
  <YourButton style={styles.YourButton}>
  </YourButton>
</LinearGradient>

Answer 2

您可以使用ART库。

import {
    ART
} from 'react-native';

class Circle extends React.Component {

    render() {
      const {radius, ...rest} = this.props

      const circle = ART.Path()
        .move(radius, 0)
        .arc(0, radius * 2, radius)
        .arc(0, radius * -2, radius)

      return <ART.Shape {...rest} d={circle} />
    }
  }

const linearGradient = new LinearGradient({
            '0': '#EC6474',
            '1': '#7F5CFA'
         },
          "0", "0", "300", "0"
        );


 <ART.Surface width={200} height={200}>
            <ART.Group x={0} y={0}>
                <Circle radius={100} fill={linearGradient} />
            </ART.Group>
        </ART.Surface>

结果：

您将不得不在路径上玩一点，并将ART库链接到您的项目，但它已包含在RN中。