Это возможно, но это немного сложно.Идея в том, что вам нужно создать «маску», к которой вы можете применить форму.После этого вы можете поместить изображение как дочерний элемент маски, чтобы он по существу маскировал область, которую вы хотите.Вероятно, возможно сделать это с динамическим размером, но я не нашел время, чтобы придумать это решение, я оставлю это вам;)
Надеюсь, это поможет вамправильное направление, хотя.
Сначала давайте настроим структуру приложения
class App extends Component {
render() {
return (
<View style={styles.app}>
<Mask />
</View>
);
}
}
Довольно просто, просто базовое приложение с компонентом маски.Я сделал его компонентом, чтобы вы могли передавать ему реквизиты в будущем (как, например, изображение uri).
Тогда компонент маски
const logoUri = `http://66.media.tumblr.com/86b941b3445b80a518ea51208f48ab35/tumblr_ntpi99a6Pl1uounv1o1_500.png`;
const Mask = (props) => (
<View style={styles.maskContainer}>
<View style={styles.mask}>
<Image
source={{ uri: logoUri }}
style={styles.img}
/>
</View>
</View>
)
maskContainer - это позиционированиеэлемент, чтобы помочь центрировать изображение.mask использует подход овального стиля , но чтобы края не закруглялись как радиус границы, мы должны масштабировать его в 2 разаСтиль img должен изменить масштабирование так, чтобы само изображение не деформировалось :)
const styles = StyleSheet.create({
app: {
marginHorizontal: "auto",
maxWidth: 500,
backgroundColor: "#e0e0e0",
width: 700,
height: 700
},
mask: {
width: 200,
height: 470,
borderBottomLeftRadius: 100,
borderBottomRightRadius: 100,
overflow: "hidden",
transform: [{ scaleX: 2 }]
},
img: {
height: 470,
width: 299,
left: 25,
position: "absolute",
transform: [{ scaleX: 0.5 }, { translate: "-50%" }]
},
maskContainer: {
position: "absolute",
left: "50%",
transform: [{ translate: "-50%" }]
}
});