我已经try 了你的设置+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
}
}