React-Native图标未在视图中心对齐

Question

这是我用来在背景颜色为圆形的视图中心放置图标的代码：

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>

Answer 1

在顶部和左侧的图标上填充空白----

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

这是工作示例 https://snack.expo.io/@msbot01/icon-center

Answer 2

为了使alignItem和justifyContent工作，应将显示设置为“ flex”：

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