User interface 反应本机自定义按钮

如何创建该按钮

我尝试了，我能够得到边界半径和阴影，但我不能设置背景的梯度。

---

我的第二种方法是将按钮的设计文件（svg）导出为png，并将其传递给一个

，但就大小而言，这看起来非常难看。但即使我以一种非常大的格式导出它，它看起来也很愚蠢，所以这对我来说不是一个选项。有人可能知道如何做到这一点吗？

尝试将您的按钮环绕在这个库上

试试这个代码

<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>

---

您可以使用艺术库

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>

导入{
艺术
}从“反应本机”；
类。组件{
render（）{
const{radius，…rest}=this.props
常数圆=艺术路径（）
.移动（半径，0）
.弧（0，半径*2，半径）
.弧（0，半径*-2，半径）
返回

您需要对路径进行一点处理，并将艺术库链接到您的项目，但它已经包含在RN中。
使用此选项可以获得水平渐变开始={[0,0]}结束={[1,0]}此库不适用于我的环境react-native 0.53。它告诉我缺少BVlineArgRadient。我认为react-native的支持版本为0.40。因此，很遗憾，这不是我的解决方案。更正：必须重建我的项目。这很有效！非常感谢