我是React Native的新手,正在try 将<Image />组件集中在更大的<View />中,如下所示:

import { Image, View } from 'react-native';

<View
  style={{
    width: 48,
    height: 48,
    alignSelf: "center",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
  }}
>
  <Image
    style={{
      width: 32,
      height: 32,
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      margin: "auto",
    }}
    source={spinner}
  />
</View>;

但它不是居中,而是位于左上角<View />以内.

上面的css可以在HTML中工作,但React Native我缺少什么?顺便说一句,我必须使用图像的绝对位置来覆盖<View />内的其他组件.

谢谢,

推荐答案

您已为0指定了topleft值,从而将其置于左上角.

这应该起作用:

<Image
  style={{
    width: 32,
    height: 32,
    position: "absolute",
    margin: "auto",
  }}
  source={spinner}
/>

Css相关问答推荐

如何更改Angular mat-checkbox组件的标签字体大小?

视频嵌入在Bootstrap 5轮播中没有响应扩展

为什么盒影没有显示在我的Angular组件中?

CSS动画与不正确的时间比率

如何在CSS中使用nextJs来指定基色?

在react native中应用阴影

Nuxt 3+sass:不能将包含路径与@IMPORT和@USE一起使用

如何更改Swiper Navegation默认 colored颜色

当鼠标移到侧边栏之外时,如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断?

解释 "document.styleSheets[0].cssRules[0].style;"

我怎样才能准确地获得虚构文本内容宽度的边距?

Vue.js 变量中的动态类变量

使用任意运行时字符串进行 Tailwind CSS 类定位

CSS 常量()用于什么?

为什么我的 CSS 需要一个它似乎不需要的大括号?

使用之前和之后为锚标签添加画笔描边效果

中心表单提交按钮 HTML / CSS

找到第一个可滚动的父级

CSS过渡自动高度不起作用

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?