在边框和图像之间添加空格：React Native答案

【问题标题】：Adding whitespace between the border and the image : React Native在边框和图像之间添加空格：React Native
【发布时间】：2020-06-25 13:03:22
【问题描述】：

我试图让我的可触摸物在按下时有一个边框。我可以这样做，但我正在寻找如何在边框和圆圈之间添加空白。
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' })}/>

我尝试了几件事，但都没有成功。有没有办法添加两个边框？我尝试使用填充，但它什么也没做，我摆弄了边距和半径，但什么也没做。谢谢你的帮助。

【问题讨论】：

可以分享colorPicker的样式吗？

标签： reactjs react-native border native whitespace

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

【讨论】：