css - React-Native-Web 为内联样式创建自动类并以错误的顺序应用它们

Question

这是一个 React Native Web 和 NextJS 元素。

我在 React 中使用内联样式，而 RN-Web 似乎把这些搞乱了。底层有一些代码将常用的样式组合到自动类中，并在编译代码时应用它们。例如:

.r-borderWidth-rs99b7 {
    border-width: 1px;
}

这很好，我认为这是框架中内置的某种微优化。问题在于它以错误的顺序应用它们(并且还重复可能是问题的顺序)。

这是我的源代码:

<TouchableOpacity
            style={{
              width: '100%',
              padding: 8,
              borderRadius: 32,
              borderColor: '#aaa',
              flexDirection: 'row',
              alignItems: 'center',
              borderWidth: 1,
            }}
            onPress={() => console.log('pressed')}
          >
...
</TouchableOpacity>

但是当它从 NextJS 编译成 HTML 时，我最终得到:

element.style {
    align-items: center;
    border-color: rgb(170, 170, 170);
    border-radius: 32px;
    flex-direction: row;
    padding: 8px;
    transition-duration: 0s;
    width: 100%;
    -webkit-box-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}

.css-view-1dbjc4n {
    -webkit-box-align: stretch;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    align-items: stretch;
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0px;
    min-height: 0px;
    min-width: 0px;
    padding: 0px;
    position: relative;
    z-index: 0;
}

.r-borderWidth-rs99b7 {
    border-width: 1px;
}

.css-view-1dbjc4n {
    -webkit-box-align: stretch;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    align-items: stretch;
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0px;
    min-height: 0px;
    min-width: 0px;
    padding: 0px;
    position: relative;
    z-index: 0;
}

奇怪的事情:

• 默认的 View 样式被复制并应用两次
• 我的边框宽度样式被添加到它自己的类中
  • 只有当屏幕上有多个使用内联边框宽度样式的元素时，才会发生这种情况。同样，我认为这是某种微优化。
• View 样式应用在边框宽度样式之上。 :(

我知道这是一个非常具体的问题，并且没有很多其他人结合使用这些库。但我希望在我开始研究 React-Native-Web 和 NextJS github 之前，这里有人可能有一些见解。

Answer 1

我明白了。

在寻找 NextJS 和 React-native-web 的 github 问题后，I found this issue which describes the exact same problem.

不过，有问题的图书馆几年前就被修复了。通过反复试验以及广泛使用该工具，

https://gist.github.com/necolas/8ee958917db65542784b60323ca6c4bc

我能够将问题范围缩小到这段代码。从应用程序中删除它修复了所有 CSS 问题。

import { SafeAreaProvider } from 'react-native-safe-area-context'
<SafeAreaProvider>...</SafeAreaProvider>

老实说，此时我不知道为什么要添加 SafeAreaProvider。非本地 SafeAreaView 似乎需要它。但是 RN + RN-Web 中内置的 SafeAreaView 对我来说工作得很好。

如果其他人也有类似的问题，我希望这个答案能为您指明正确的方向。