删除按钮轮廓本机基础
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/…以上是关于删除按钮轮廓本机基础的主要内容,如果未能解决你的问题,请参考以下文章