删除按钮轮廓本机基础答案

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

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案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',
  },

【讨论】：

我已经尝试过了，但它似乎对我不起作用。 stackoverflow.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
虽然这解决了按钮轮廓问题，但不幸的是，按钮仍然不起作用。我猜它被视图重叠了。 stackoverflow.com/questions/63229514/…
你可以尝试模拟点击事件

【解决方案3】：

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

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

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

【讨论】：

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