web-dev-qa-db-ja.com

React Native Android Negative Margins

私はReactオーバーラップ効果のあるユーザーアバターコンポーネントを持つネイティブアプリに取り組んでいます：

enter image description here

私はそれが負のマージンを許可するのでそれをiOSで動作させることができました、しかしあなたがAndroidで負のマージンを使うとき、それはこのように最後の画像を切り取ります：

enter image description here

ここに私が使っているスタイルがあります：

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

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

avatarContainerは画像の背後にある白い円で、avatarは画像そのものです。

目的のスタイルを実現するために両方のプラットフォームで機能する最良のアプローチは何ですか？

javascriptandroidreactjsreact-nativeflexbox
15
Zach

私はあなたの設定をかなり試しました+ flexboxそしてすべてがうまくいくようです。

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