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 中不需要 Display Flex，我认为它不受支持。

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

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

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

adb shell input keyevent 82