<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* 屏幕安全边距
* 屏幕安全区域（又称“安全区”）是指手机屏幕上能显示应用内容的区域，
* 它是系统自动计算出的，不受用户操作影响，用于防止应用内容被系统状态栏、通知栏、输入法遮挡。
* 安全区的大小和位置因手机型号、系统版本、分辨率、刘海屏、导航栏等因素而异。
* 安全区的大小和位置会随着系统版本、分辨率的变化而变化。
* 为了保证应用内容在安全区内完整显示，开发者应当注意以下几点：
* 1. 避免在安全区外显示内容，如导航栏、状态栏、输入法等。
* 2. 避免在安全区内放置过大的元素，如长按拖动操作、滑动操作等。
* 3. 避免在安全区内放置弹窗、悬浮窗等。
* 4. 避免在安全区内放置输入框、按钮等。
* 5. 避免在安全区内放置文本内容，如长文本、超长文本等。
* 6. 避免在安全区内放置滚动条、滚动视图等。
* 7. 避免在安全区内放置自定义控件，如自定义导航栏、自定义输入框等。
* 8. 避免在安全区内放置自定义动画，如自定义弹窗、自定义悬浮窗等。
* 9. 避免在安全区内放置自定义字体，如自定义按钮字体等。
* 10. 避免在安全区内放置自定义背景，如自定义背景图片、自定义背景色等。
* 11. 避免在安全区内放置自定义字体，如自定义按钮字体等。
* 12. 避免在安全区内放置自定义控件，如自定义导航栏、自定义输入框等。
* 13. 避免在安全区内放置自定义动画，如自定义弹窗、自定义悬浮窗等。
* 14. 避免在安全区内放置自定义字体，如自定义按钮字体等。
* 15. 避免在安全区内放置自定义背景，如自定义背景图片、自定义背景色等。
*
/
/*
import { useSafeAreaInsets } from 'react-native-safe-area-context' (react hooks 用来获取屏幕安全边距)
*/
// useSafeAreaInsets 是一个 hook，用来获取屏幕安全边距。(notch/状态栏/手势指示条/圆角等带来的不可用区域)
// 你必须在组件树顶层包一层 SafeAreaProvider，Hook 才能拿到正确值
// App.tsx
import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context'
export default function App() {
return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<Root />
</SafeAreaProvider>
)
}
// 1. 让内容不被状态栏/手势条遮住
import { useSafeAreaInsets } from 'react-native-safe-area-context'
function Screen() {
const insets = useSafeAreaInsets()
return (
<View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}>
{/* 内容 */}
</View>
)
}
// 2. 列表底部安全留白（不挡住最后一项）
const { bottom } = useSafeAreaInsets()
<FlatList contentContainerStyle={{ paddingBottom: bottom + 16 }} ... />
4) 绝对定位控件（吸顶/吸底悬浮）
const { top, right, bottom } = useSafeAreaInsets()
<View style={{ position: 'absolute', top: top + 8, right: right + 12 }} />
<View style={{ position: 'absolute', bottom: bottom + 12, left: 16, right: 16 }} />
</script>
</body>
</html>
