web-dev-qa-db-fra.com

React Native Android Marges négatives

Je travaille sur une React application native qui a un composant avatar utilisateur avec un effet de chevauchement:

enter image description here

J'ai pu le faire fonctionner sur iOS car il autorise les marges négatives, mais lorsque vous utilisez des marges négatives sur Android, il coupe la dernière image comme ceci:

enter image description here

Voici les styles que j'utilise:

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

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

avatarContainer est le cercle blanc derrière l'image et avatar est l'image elle-même.

Quelle est la meilleure approche qui fonctionne sur les deux plates-formes pour obtenir le style souhaité?

javascriptandroidreactjsreact-nativeflexbox
15
Zach

J'ai essayé avec à peu près votre configuration + flexbox et tout semble fonctionner correctement.

enter image description hereenter image description here

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
  }
}
13
Piotr Berebecki