Css 如何在React Native中创建具有渐变颜色和图标的按钮？

就像标题所说的，我想问一下，是否有一种方法可以在React Native中创建一个带有渐变颜色和图标的按钮？我知道没有外部库就无法添加渐变色，所以我尝试了这个：

---

但是，我看不到一种方法可以将图标作为道具添加到这个库的渐变按钮中。答案不必使用库，我只想知道一种方便的方法来实现我描述的按钮。谢谢。

在您提供的软件包文档中，它显示了如下示例：

     <GradientButton
          style={{ marginVertical: 8 }}
          textStyle={{ fontSize: 20 }}
          gradientBegin="#874f00"
          gradientEnd="#f5ba57"
          gradientDirection="diagonal"
          height={60}
          width={300}
          radius={15}
          impact
          impactStyle='Light'
          onPressAction={() => alert('You pressed me!')}
    >
      Gradient Button #2
    </GradientButton>

alert（'你按了我！'）}
>
渐变按钮#2

---

也许可以尝试将图标添加到标签之间，而不是作为道具？

您可以使用下面的图标创建自己的按钮

import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

const GradientButton = ({ onPress, style, colors, text, renderIcon }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <LinearGradient colors={colors} style={style}>
        {renderIcon()}
        <Text style={styles.text}>{text}</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
};

从“@expo/vector icons”导入{Ionicons}；
从“expo linear gradient”导入{LinearGradient}；
const GradientButton=（{onPress，style，colors，text，renderIcon}）=>{
返回(
{renderIcon（）}
{text}
);
};

用法将是

  <GradientButton
    onPress={() => alert('Button Pressed')}
    style={{
      padding: 15,
      alignItems: 'center',
      borderRadius: 5,
      flexDirection: 'row',
    }}
    colors={['#874f00', '#f5ba57']}
    text="Press"
    renderIcon={() => (
      <Ionicons
        name="md-checkmark-circle"
        size={20}
        color="green"
        style={{ marginHorizontal: 20 }}
      />
    )}
  />

alert（'Button Pressed'）}
风格={{
填充：15，
对齐项目：“居中”，
边界半径：5，
flexDirection:'行'，
}}
颜色={['#874f00'，'#f5ba57']}
text=“按”
renderIcon={（）=>(
)}
/>

你将有更多的控制按钮，并改变它无论你想，你可以添加更多的道具来定制它的方式你想要的

您可以在这里试用演示

以上图标和渐变套装适用于世博会

---

您也可以使用和打包

实际上，这就回答了这个问题。我尝试将图标和文本元素放在GradientButton标记中。它们也可以彼此相邻排列，并将它们嵌套在具有flexDirection:row的视图中。但是，在GradientButton标记中添加View元素会导致textStyle不会影响文本，同时我尝试添加为文本道具的样式也不起作用。也没有找到将“flexDirection:row”添加到GradientButton样式的道具的方法，因此，这导致了一个死锁，flexDirection或textStyle都必须忽略。不确定我是否理解你的尝试。您是否尝试过将“flexDirection:row”直接添加到GardientButton的样式属性中？至少有人建议它应该可以工作。有一个bug，因为我在我的TextStyles中使用了textDecorationColor而不是color。。。我现在相信你的答案会很好。仍然使用了TouchableOpacity/LinearGradient组合。