Как обрезать изображения в React Native, чтобы они были похожи на круглую форму вместо прямоугольной?

Question

У меня есть несколько картинок, и мне нужно обрезать их по кругу, прежде чем использовать их в React Native для использования в качестве ViroImage в Reaction-Viro (библиотеке, которая отображает 360Images).

Я не могу применить много стилей к изображениям, и borderRadius, похоже, не решает мою проблему.

Answer 1

создайте контейнер с радиусом границы = 30, а затем поместите в него свое изображение

Answer 2

Я создал библиотеку react-native-image-tools-wm , когда мне пришлось обработать изображение на клиенте и не смог найти ничего, что стоило бы использовать.Попробуйте.

Пример:

const image = Image.resolveAssetSource(require('./my-image.jpg)).uri;
const maskImage = Image.resolveAssetSource(require('./mask-image.png)).uri;

RNImageTools.mask(image, maskImage).then(({ uri, width, height }) => {
    // Sync with your app state
});

Обратите внимание, что ваше изображение маски должно быть черным на белом на iOS и черным на прозрачном на Android.Черная часть будет заменена вашим изображением, а белая / прозрачная станет прозрачной.Вы можете использовать суффиксы .android и .ios в именах, и RN загрузит их условно.

Вы также можете создать маску, используя метод createMaskFromShape, но вам придется самостоятельно создавать точки формы.