Блог

Главная - Вопросы по программированию - Значок React-native не выровнен по центру представления

Значок React-native не выровнен по центру представления

#html #react-native

#HTML #react-native

Вопрос:

Это код, который я использовал, чтобы создать положение значка в центре кругового вида с цветом фона:

 import EEIcon from "react-native-vector-icons/Entypo";
              <View
               style={{
                      backgroundColor: "#F2F2F2",
                      alignItems: "center",
                      justifyContent: "center",
                      height: 25,
                      width: 25,
                      borderRadius: 12.5
                    }}
                  >
                    <EEIcon
                      name="location-pin"
                      style={{ color: "#fff", fontSize: 15 }}
                    />
                  </View>

Вот как выглядит значок

Ответ №1:

Добавьте отступы к значку сверху и слева —-

 <EEIcon name="location-pin" style={{ color: "#fff", fontSize: 15, paddingTop:3, paddingLeft:2 }} />

Вот рабочий пример
https://snack.expo.io/@msbot01/icon-center

Ответ №2:

Для того, чтобы alignItem и justifyContent работали, для отображения должно быть установлено значение «flex»:

    style={{
          backgroundColor: "#F2F2F2",
          alignItems: "center",
          justifyContent: "center",
          height: 25,
          width: 25,
          borderRadius: 12.5,
          display:"flex"
    }}