React Native Android负边距

Question

我正在开发一个React Native应用，其中有一个带有重叠效果的用户头像组件：

我已经在iOS上使其工作了，因为它允许负边距，但是当您在Android上使用负边距时，会出现以下图片中的剪裁问题:

这是我正在使用的样式：

avatarContainer: {
    borderRadius: 20,
    width: 40,
    height: 40,
    marginRight: -11
},

avatar: {
    borderRadius: 20,
    width: 40,
    height: 40
},

avatarContainer是图片后面的白色圆圈，而avatar则是图片本身。

在两个平台上实现所需样式的最佳方法是什么？

- Zach

Answer 1

我已经尝试了与你的设置及 flexbox 几乎相同的内容，一切似乎都正常工作。

class App extends React.Component {
  render() {
    const { overlapContainer, avatarContainer, avatar} = styles;

    return (
        <View style={overlapContainer}>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-3.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-7.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-3.jpg' }} />
          </View>

          <View style={avatarContainer}>
            <Image style={avatar} source={{ uri: 'http://lorempixel.com/output/cats-q-c-100-100-7.jpg' }} />
          </View>

        </View>
    );
  }
}


const styles = {
  overlapContainer: {
    flexDirection: 'row-reverse',
    justifyContent: 'flex-end',
    marginTop: 50,
    marginRight: 50
  },
  avatarContainer: {
    borderRadius: 33,
    height: 66,
    width: 66,
    marginLeft: -15,
    borderStyle: 'solid',
    borderWidth: 3,
    borderColor: 'white'
  },
  avatar: {
    borderRadius: 30,
    height: 60,
    width: 60
  }
}

- Piotr Berebecki