线性渐变不适用于圆形可触摸不透明度 React Native

Question

我为可触摸的不透明度创建了线性渐变。问题是我希望我的按钮是圆形的，所以我添加了“borderRadius：100”和渐变，覆盖了如果我没有将按钮圆形化的“角落”所在的位置。我该如何摆脱这个？以下是我的代码和问题图片。我到处看，似乎找不到问题。任何帮助将不胜感激。

 <View
          style={{
            flex: 0.6,
            justifyContent: "flex-start",
          }}
        >
          <LinearGradient
            colors={[
              "#F7BBB2",
              "#FFC9B5",
              "#FFDDC7",
              "#FFF6D4",
              "#FFFDF2",
            ]}
            // style={styles.background}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
          >
            <TouchableOpacity
              disabled={isDisabled}
              style={
                isDisabled
                  ? styles.disabled
                  : styles.btnContainer
              }
              //activeOpacity={0.2}
              onPress={() => {
                //handleSignUp();
                pressHandler();
              }}
            >
              <Text
                style={{
                  color: "black",
                  textAlign: "center",
                  fontSize: 20,
                  fontFamily: "Montserrat",
                  //opacity: 0.3,
                }}
              >
                Next
                <Text>{"  "}</Text>
                <Ionicons
                  name="arrow-forward-outline"
                  size={20}
                  color="black"
                />
              </Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>

这是我的按钮样式

disabled: {
    width: 200,
    height: 70,
    borderRadius: 100,
    overflow: "hidden",
    borderWidth: 1,

  },

Answer 1

替换为

  <LinearGradient
    colors={[
      "#F7BBB2",
      "#FFC9B5",
      "#FFDDC7",
      "#FFF6D4",
      "#FFFDF2",
    ]}
    style={{borderRadius: 100}}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 1 }}
  >

或者只是将此 style = {{borderRadius : 100}} 添加到您的 <LinearGradient > 组件中。

线性渐变不适用于圆形可触摸不透明度 React Native

Linear Gradient Not working for rounded touchable opacity React Native

react-native

expo

linear-gradients