Блог

Я пытаюсь отредактировать некоторые стили в своем приложении react, чтобы значок одинаково хорошо отображался в iOS и Android. После тестирования на iPhone я перешел к тестированию на Android, и я заметил, что значок круга был обрезан, поэтому я скорректировал это с помощью следующей строки:

   height: Platform.OS === 'android' ? 20 : 15,
 

Это решило эту конкретную проблему. Однако я все еще замечаю, что, хотя на iPhone значок отображается по центру с текстом в той же строке, в Android он отображает значок круга немного выше текста. Я пробовал добавлять отступы и/или поля для Android, но, похоже, это не помогает. Я также попытался настроить alignItem: 'center' itemIcon стиль, но это не имело никакого значения. Есть идеи, как я могу убедиться, что значок круга находится по центру текста в Android? Вот полная таблица стилей:

 export default {
  sectionContainer: {
    flex: 1,
    flexDirection: 'column',
    width: '100%',
    justifyContent: 'space-between',
    padding: 15,
  },
  itemContainer: {
    flex: 1,
    flexDirection: 'row',
    width: '100%',
    alignItem: 'center',
  },
  itemIcon: {
    width: 15,
    height: Platform.OS === 'android' ? 20 : 15,
    color: '#309b8f',
    padding: 5,
    paddingLeft: 0,
  },
  horizontalBorderLight: {
    flex: 1,
    borderBottomColor: '#eee',
    borderBottomWidth: 1,
    width: '100%',
  },
}