Граница вокруг вида оставляет некоторую область вокруг краев в цвете представления в ответном нативном

Question

Возможно, я не сделал лучшую работу по созданию заголовка для вопроса. Ниже показано, ошибка на rnplay

https://rnplay.org/apps/eNIbjw

Проблема заключается в том, что я хочу, чтобы показать некоторые цветные плитки на аватары пользователей, чтобы представить свой статус. Итак, у меня есть изображение аватара, по которому я положил View, цвет фона которого установлен на цвет статуса пользователя (зеленый в образце кода), и у меня есть белая рамка вокруг View, так что она выглядит лучше. Если вы внимательно наблюдаете, возможно, несколько раз нажмите (Cmd + +), чтобы увеличить масштаб экрана, в iOS есть очень тонкая зеленая линия. Ниже приведен снимок экрана о том, как он выглядит на iOS.

Эта проблема не присутствует на Android, и кажется, прекрасно, без тонкой зеленой линии вокруг границы.

Я пробовал несколько разных стилей, чтобы обойти эту проблему, но с моим ограниченным знанием CSS я не смог этого сделать.

Пожалуйста, поделитесь, если у вас есть дорога вокруг него.

Спасибо!

Answer 1

следующий код должен дать вам тот же результат, но он не использует атрибут border. Он использует два круга, один больше, чем другой. Более крупный (родительский) белый, а внутренний (ребенок) - зеленый. Из-за того, что ваш justifyContent и alignItems настроены на «центр», внутренний круг всегда будет иметь 2px белого цвета вокруг него. Вот код:

<View style={styles.container}> 
    <View style={{width: 30, height: 30, marginHorizontal: 2}}> 
     <Image 
     source={{uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_2-512.png'}} 
      style={{height: 30, width: 30}} /> 
     <View style={{backgroundColor: 'white', position: 'absolute', height: 16, width: 16, top: -6, right: -6, 
     borderRadius: 8, justifyContent: 'center', alignItems: 'center'}}> 
     <View style={{width: 26, height: 26, 
      backgroundColor: 'green'}} /> 
     </View> 
    </View> 
    </View>