删除按钮大纲本机-基

Question

我正在尝试将一个图标包装在一个按钮中。 像这样:

            <Button
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');
              }}>
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </Button>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
  },
  icon: {
    paddingTop: moderateScale(12),
  },

但是，当我用按钮包裹我的图标时，图标被向下推，并且开始出现一个轮廓，即使我已经将borderRadius设置为0。 我怎样才能解决这个问题，使它看起来自然，没有区别的背景屏幕和图标？

Answer 1

也许试着将图标和文本包装在一个可触摸的不透明区域内？ 或者仅仅是一个图标，你可以把它包裹在一个可触摸的透明物中，然后你可以点击它并设置onPress功能，就像你对一个按钮所做的那样。

参考:https://reactnative.dev/docs/touchableopacity#docSnav

您还可以尝试React Native提供的其他可触摸包装器。

Answer 2

我想建议您使用触摸不透明而不是按钮。 所以你可以很容易地这样做

          <TouchableOpacity
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');}}
           >
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
           </TouchableOpacity>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

Answer 3

你的纽扣样式相当不错，不过我还是建议你这样做:

backgroundColor: 'white',
borderRadius: 0,
borderColor: 'transparent', //will make the colour fully opaque, but you could get an even better effect with 'border: none'

我注意到您的按钮上有一个框影属性，这很可能是创建边框的原因。 所以你需要将你的按钮css设置为'box-shadow:none'。

所以，在中心对齐你的图标，你还需要将你的显示设置为flex，然后将你的内容居中。 因此，最终的按钮修订应该如下所示（普通css）

{
  background-color: white, // could be transparent if you want it to be the same colour as 
the parent background
  border: none //to remove any border properties
  box-shadow: none

  display: flex;
  justify-content: center;
  align-items: center; 


  //NOTE: you might need to set up a width and height for the flex to take effect
}

{
   backgroundColor: 'white' 
   //or backgroundColor: 'transparent'
   borderRadius: 0,
   borderColor: 'white',
   elevation: 0,

   flex : 1,
   flexDirection: "column",
   justifyContent: 'center',
   alignItems: 'center'
}

阅读如何去除阴影或仅仅使用仰角:0