Question

正如标题所说，我想问一下有没有办法在 React Native 中创建一个带有渐变颜色的按钮和一个图标？我知道没有外部库就不能添加渐变色，所以我尝试了这个：

https://www.npmjs.com/package/react-native-gradient-buttons

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

Answer 1

在您提供的包的文档中，它显示了这样的示例：

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

也许尝试在标签之间添加您的图标而不是作为道具？

Answer 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>
  );
};

用法是

  <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 }}
      />
    )}
  />

您将对按钮拥有更多控制权并随心所欲地更改它，您可以添加更多道具以按照您想要的方式对其进行自定义。

您可以在这里试用演示 https://snack.expo.io/@guruparan/gradientbutton

以上图标和渐变包为expo 您也可以使用 RN Vector icons 和 Linear gradient 包

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

2 个答案: