删除按钮轮廓本机基础

Posted

技术标签:

【中文标题】删除按钮轮廓本机基础【英文标题】:remove button outline native-base 【发布时间】:2020-11-23 11:57:40 【问题描述】:

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

            <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,图标也会被向下推并且轮廓开始出现。我该如何解决这个问题,使其看起来自然并且没有区别背景屏幕和图标?

【问题讨论】:

【参考方案1】:

我建议您使用 TouchableOpacity 而不是 Button 。所以你可以很容易地做到这一点

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

【讨论】:

我已经尝试过了,但它似乎对我不起作用。 ***.com/questions/63229514/… 我会检查并验证它,并将让您作为您问题的答案。 snack.expo.io/dpmUu3!s4 我制作了一个样式完全相同的小吃。奇怪的是,它在这里有效,但在我的模拟器中无效。任何想法为什么会这样?我什至尝试将 touchableOpacity 添加到 Text 和整行。尽管如此,我还是无法点击它们。【参考方案2】:

您的按钮样式还不​​错,不过我建议您这样做:

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

我注意到您的按钮上有一个 box-shadow 属性,这很可能是创建边框的原因。所以你需要将你的按钮 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'

阅读如何Remove shadows 或仅使用海拔:0

【讨论】:

border 不是 RN 样式表中的有效样式属性。 那是因为它是纯css,我添加了一个RN样式表版本,试试看。 附注您可以在此处阅读有关 flex 的更多信息 - reactnative.dev/docs/flexbox#flex 虽然这解决了按钮轮廓问题,但不幸的是,按钮仍然不起作用。我猜它被视图重叠了。 ***.com/questions/63229514/… 你可以尝试模拟点击事件【参考方案3】:

也许尝试将图标和文本包装在 TouchableOpacity 中?或者甚至只是图标,您可以将其包装在 TouchableOpacitiy 中,然后您可以单击它并设置 onPress Funktions,就像对按钮执行此操作一样。

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

你也可以试试 React Native 提供的其他 Touchable Wrappers。

【讨论】:

这似乎对我不起作用***.com/questions/63227106/…

以上是关于删除按钮轮廓本机基础的主要内容,如果未能解决你的问题,请参考以下文章

css 删除按钮轮廓焦点

css 删除按钮上的蓝色“选定”轮廓

CSS 删除mozilla中的按钮轮廓

如何从输入按钮中删除轮廓边框

增加输入框的宽度?删除单击按钮或输入框时出现的黑色轮廓?

删除FFIE和Webkit中按钮上的轮廓线和虚线