Почему радиус естественной границы реагирования работает на iOS, а не Android

Question

Создан компонент списка, в котором есть изображение, текст и кнопка. изображение имеет радиус границы и borderColor на нем.

Проблема: радиус цветных границ на android не распознается, но на iOS работает нормально ...

вот код:

Список:

import React, { useState } from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Modal,
    FlatList,
    Dimensions,
    TouchableOpacity,
    TouchableWithoutFeedback
} from 'react-native';
import { Svg, Path, G, Line } from 'react-native-svg';
const { width } = Dimensions.get('window');

const BlockList = (props) => {
    const onPress = (name) => {
        alert('Unblocking ' + name);
    };
    return (
        <FlatList
            style={styles.container}
            data={props.data}
            renderItem={({ item, index }) => (
                <View style={styles.itemContainer}>
                    <View style={styles.leftSide}>
                        <Image source={item.img} style={styles.img} resizeMode={'contain'} />
                        <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
                    </View>
                    <View style={styles.rightSide}>
                        <TouchableOpacity onPress={() => onPress(item.name)} style={styles.btn}>
                            <Text style={{ fontWeight: 'bold', color: '#fff' }}>Unblock</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )}
        />
    );
};

const styles = StyleSheet.create({
    itemContainer: {
        flexDirection: 'row',
        width: width * 0.95,
        backgroundColor: '#fff',
        marginHorizontal: width * 0.025,
        marginBottom: width * 0.02,
        borderRadius: 18,
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: width * 0.02,
        shadowColor: '#333',
        shadowOffset: {
            width: 3,
            height: 3
        },
        shadowOpacity: 0.5,
        shadowRadius: 3,
        elevation: 5
    },
    img: {
        borderRadius: 50,
        borderWidth: 2,
        borderColor: '#219F75',
        height: width * 0.125,
        width: width * 0.125,
        marginHorizontal: width * 0.05
    },
    btn: {
        borderRadius: 11,
        backgroundColor: '#219F75',
        padding: width * 0.0275
    },
    leftSide: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    rightSide: {
        marginRight: width * 0.05
    }
});

export default BlockList;

вот как он должен выглядеть (работает правильно iOS):

вот как выглядит android (обратите внимание на зеленую квадратную рамку):

Почему это происходит и как я могу получить радиус моей границы?

Answer 1

Если нам нужен круг просмотра, мы также реализуем его, устанавливая borderRadius равный половине высоты (ширины) вида.

<View
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:100,
       height:100,
       backgroundColor:'#fff',
       borderRadius:50,
     }}
 />

В вашей ситуации ваше изображение устанавливает ResizeMode . поэтому он не показал желаемого эффекта. для этого попробуйте переместить его в представление или использовать resizeMode:stretch; resizeMode:cover или удалите его.

<View style={styles.leftSide}>
 <Image source={item.img} style={styles.img}/>
   <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
 </View>

img: {
        borderRadius: width * 0.125*0.5,
        borderWidth: 2,
        borderColor: '#219F75',
        height: width * 0.125,
        width: width * 0.125,
        marginHorizontal: width * 0.05
    },

содержат: Равномерное масштабирование изображения (сохранение соотношения сторон изображения), чтобы оба размера (ширина и высота) изображения были равны или меньше чем соответствующий размер вида (без отступов).

Answer 2

попробуйте это в стиле img borderRadius: (ширина * 0,125) / 2

Answer 3

Вы устанавливаете высоту ширины изображения динамически, но значение радиуса границы устанавливается c при использовании устройства с более низким разрешением android иногда изображение borderRedius больше ширины изображения, поэтому оно имеет место.

Пожалуйста, установите все атрибуты динамически , Будет лучше, если использовать изображение borderRedius на половину ширины

Answer 4

Попробуйте borderRadius:width * 0.125 в стиле img.