如何覆盖 React Native Web 预定义的 css

Question

我正在将我的 expo 应用程序转换为 react-native-web，我在显示Image时遇到了问题。默认情况下，react-native-web 使用position:absolute. 我想覆盖那个类，这是我的代码。

反应原生代码

<View>
    <Image
                style={{width: '80%', height: '35%',position: 'relative'}}
                source={require('../../assets/images/stn_logo.png')}
                alt="Logo" title="Logo" border="0"
              />
  </View>

从 chrome 元素转换的代码

<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
    <div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></div>
    <img alt="" draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>

在这里你可以看到 My React css 添加到 Parent div 但在img标签 react-native-web 上添加了一个 class css-accessibilityImage-9pa8cd，它的 CSS 在下面来自 chrome

    .css-accessibilityImage-9pa8cd {
    bottom: 0px;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    z-index: -1;
}

我想将位置覆盖为relative。我已经设置position:relative为 React-Native Image 元素。
谁能帮我更改 React-native-web 的预定义 CSS

Answer 1

我在这个问题上遇到了困难，就像您使用的是非弹出的expo React Native 并且没有index.html 文件。解决此问题的一种方法是为丢失的图像定义高度和宽度像素。

我刚刚想到的另一种方法是创建@zulqarnain 提到的index.html 文件——要创建它，您需要运行expo customize:web并选择web/index.html，按空格键，然后按Enter 键。-- 请参阅https://docs.expo.io/guides/customizing-webpack/#editing-static-files了解文档。

从那里您可以访问该文件并覆盖表单的 CSS。我在index.html的样式部分添加了这个

.css-accessibilityImage-9pa8cd{
      inset: 0px;
    height: 100%;
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: -1;
  }