android - 如何为 React Native App 提供 Android notch 支持

Question

我想让我的应用程序的窗口在槽口的两侧绘制。我遵循了 this 的指南文章并在我的 res 文件夹中创建了 values-v28 文件夹。之后，我在 values-v28 文件夹中创建了 styles.xml 并添加了以下代码

<style name="ActivityTheme">
    <item name="android:windowLayoutInDisplayCutoutMode">
        shortEdges
    </item>
</style>

但我的应用程序的窗口仍然总是绘制在槽口下方。我完全不知道这样做的正确方法是什么。

Answer 1

我设法让它工作了!

这是我写的article解释步骤。

这是一个 TL/DR:

1. 将这些行添加到您的 MainActivity.java:

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
+            layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
+            getWindow().setAttributes(layoutParams);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+        }

        super.onCreate(savedInstanceState);
    }

1. 然后安装并链接react-native-safe-area-context处理缺口填充。这是最终结果:

代码:

import React from 'react'
import { StatusBar, Text, View } from 'react-native'
import { useSafeArea } from 'react-native-safe-area-context'

export function App() {
  const safeAreaInsets = useSafeArea()

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#ffca28',
        paddingTop: safeAreaInsets.top,
        paddingBottom: safeAreaInsets.bottom,
        paddingLeft: safeAreaInsets.left,
        paddingRight: safeAreaInsets.right,
      }}
    >
      <StatusBar backgroundColor="#7cb342" />

      <Text style={{ color: 'black', textAlign: 'center' }}>Top</Text>
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Text style={{ color: 'black', textAlign: 'center' }}>Left</Text>
        <Text style={{ color: 'black', textAlign: 'center' }}>Right</Text>
      </View>
      <Text style={{ color: 'black', textAlign: 'center' }}>Bottom</Text>
    </View>
  )
}