css 在本机反应中无法在移动设备上正常工作

Question

我试图在我的应用程序中居中显示一条错误消息，但它在 Android Studio 中看起来与 Chrome 不同。

正如您在图像中看到的，错误消息和图标未与 Android Studio 设备对齐（我在两个地方都在模拟 Pixel 2）

我正在使用来自 react-native 的 StyleSheet 和 css 是：

errorMessage: {
    display: 'flex',
    alignItems: 'center',
}

Android Studio 有什么方法可以使用 F12 工具或类似工具吗？

Answer 1

在 React Native Flex 中的工作方式与在 CSS 中有点不同。 例如，默认情况下每个视图都是 flex 并且使用 alignItems: 'center' 和 justifyContent: 'center' 您可以将项目居中。在 React Native 中不需要显示 Flex，我认为它不受支持。

所以对于errorMessage我宁愿使用这些styles：

errorMessageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
}

此外，您可以按如下方式调用开发菜单并启动“显示检查器”：

adb shell input keyevent 82