在边框和图像之间添加空白：React Native

Question

我试图让我的可触摸按钮在按下时有一个边框。我可以做到，但我正在寻找如何在边框和圆圈之间添加白色 space。
Example:

我目前拥有的：

colorPicker: {

        flex: 4,
        flexDirection: 'row',
        alignSelf: 'flex-start',
        width: '88%',
        paddingLeft: 16,
    },

circle: {
        position: 'relative',
        height: 40,
        width: 40,
        borderRadius: 40,
        margin: 10,
        borderColor: '#757083',
        borderWidth: 2,
    }

<View style={styles.colorPicker}>
   <TouchableWithoutFeedback
    style={[styles.circle, { backgroundColor: '#090C08' }]}
    onPress={() => this.setState({ color: '#090C08' })}/>

我尝试了一些东西，但 none 已经很接近了。有没有办法添加两个边框？我尝试使用填充但它什么也没做，我摆弄了边距和半径但也没有。感谢您的帮助。

Answer 1

我尝试使用 TouchableWithoutFeedback，但没有用。但是可触摸的不透明度可以很容易地设置样式，所以这里是带有 TouchableOpcity 的版本。诀窍是在内部视图中使用，并为外部视图提供填充或为内部视图提供边距。

<View style={styles.colorPicker}>
  <TouchableOpacity
    style={{
      backgroundColor: 'white',
      alignSelf: 'center',
      borderRadius: 40,
      borderColor: '#757083',
      borderWidth: 2,
    }}
    onPress={() => {}}>
    <View style={[styles.circle, { backgroundColor: '#090C08' }]}>
    </View>
  </TouchableOpacity>
</View>

样式

  colorPicker: {
    flex: 4,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    width: '88%',
    paddingLeft: 16,
    backgroundColor: 'red',
  },

  circle: {
    position: 'relative',
    height: 40,
    width: 40,
    borderRadius: 40,
    margin:5
  },

在边框和图像之间添加空白：React Native

Adding whitespace between the border and the image : React Native

reactjs

react-native

border

native

whitespace