Значок закругленной кнопки React Native не центрируется

Я пытаюсь создать кнопку со значком плюса по центру посередине, однако, если я использую React-native-vector-icons, то у нее будет дополнительное пространство внизу, а если я использую <Text>+</Text>, у него будет дополнительное пространство вверху. Я пробовал решения из React Native: идеально выровнять текст по кругу, но пока ничего не помогло.

Код кнопки:

<View>
  <Pressable
    style = {styles.button}
    onPress = {() => navigation.navigate('Add Habit')}>
    <Icon name = "plus" size = {40} color = {'black'} />
  </Pressable>
</View>


const styles = StyleSheet.create({
  button: {
    backgroundColor: '#219ebc',
    width: 75,
    height: 75,
    borderRadius: 100,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3,
    position: 'absolute',
    bottom: 10,
    right: 10,
    lineHeight: 0,
  },
});

Можете ли вы добавить скриншот, показывающий пользовательский интерфейс?

— 05.04.2024 19:08

css react-native

05.04.2024 15:22

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует небольшое смещение, поскольку используемый значок имеет другой размер. Вы можете использовать другие значки, например FontAwesome5, FontAwesome6 или другие из библиотеки. Если вы используете тот же значок, вы можете принудительно выровнять его, преобразуя с помощью translateY, это справедливо и для текста.

import { FontAwesome, FontAwesome5, FontAwesome6 } from '@expo/vector-icons';

export default function App() {
  return (
    <SafeAreaView style = {styles.container}>
      <Pressable
        style = {styles.button}
        onPress = {() => alert('The button was pressed!')}
      >
        <FontAwesome style = {styles.iconBg}  name = "plus" size = {40} color = "black" />
      </Pressable>
      <Pressable
        style = {styles.button}
        onPress = {() => alert('The button was pressed!')}
      >
        <FontAwesome style = {[styles.iconBg, styles.iconCentered]}  name = "plus" size = {40} color = "black" />
      </Pressable>
      <Pressable
        style = {styles.button}
        onPress = {() => alert('The button was pressed!')}
      >
        <FontAwesome5 style = {styles.iconBg}  name = "plus" size = {40} color = "black" />
      </Pressable>
      <Pressable
        style = {styles.button}
        onPress = {() => alert('The button was pressed!')}
      >
        <FontAwesome6 style = {styles.iconBg}  name = "plus" size = {40} color = "black" />
      </Pressable>
      <Pressable
        style = {styles.button}
        onPress = {() => alert('The button was pressed!')}
      >
        <Text style = {[styles.iconBg, styles.text]}>+</Text>
      </Pressable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  iconBg: {
    // Comment the next line to remove the bgColor
    backgroundColor: 'white',
  },
  iconCentered: {
    transform: [
      {
        translateY: 1.5
      }
    ]
  },
  text: {
    fontSize: 40,
    lineHeight: 40,
    textAlignVertical: 'center',
  },
  button: {
    backgroundColor: '#219ebc',
    width: 75,
    height: 75,
    borderRadius: 75,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3,
  },
});

Полный пример вы можете увидеть на этой Expo Snack.