reactnativecn / react-native-website

React Native 中文网
https://reactnative.cn
MIT License
216 stars 328 forks source link

安卓刘海屏幕或者说凹字屏幕适配 #546

Closed ww545 closed 2 years ago

ww545 commented 2 years ago

请按以下格式提供问题的相关信息。

问题的具体描述

CN: IOS中可以使用SafeAreaView。 但是安卓中没有,如果暴力的使用StatusBar.currentHeigh来加上边距,外观上并不是很好看,且安卓的机型非常之多,在资料中有人提出P版本的安卓是没法判断机型的。请问各位是如何解决这个问题的。

ES: SafeAreaView is available in IOS.

However, it is not found in Android. If the violent use of StatusBar. CurrentHeigh is added with a margin, the appearance is not very nice, and there are many android models. How did you solve this problem?

请描述完整的环境/版本信息

模拟器使用的是安卓 Pixel 3 XL API 26 image

预期结果

我想实现的效果是在任何机型下或有凹形屏幕,都可以不被遮挡显示。 image

希望有人可以帮到我,这个问题,没有找到解决方案。

sunnylqm commented 2 years ago

https://github.com/th3rdwave/react-native-safe-area-context

---原始邮件--- 发件人: @.> 发送时间: 2021年12月29日(周三) 上午10:56 收件人: @.>; 抄送: @.***>; 主题: [reactnativecn/react-native-website] 安卓刘海屏幕或者说凹字屏幕适配 (Issue #546)

请按以下格式提供问题的相关信息。

问题的具体描述

CN: IOS中可以使用SafeAreaView。 但是安卓中没有,如果暴力的使用StatusBar.currentHeigh来加上边距,外观上并不是很好看,且安卓的机型非常之多,在资料中有人提出P版本的安卓是没法判断机型的。请问各位是如何解决这个问题的。

ES: SafeAreaView is available in IOS.

However, it is not found in Android. If the violent use of StatusBar. CurrentHeigh is added with a margin, the appearance is not very nice, and there are many android models. How did you solve this problem?

请描述完整的环境/版本信息

模拟器使用的是安卓 Pixel 3 XL API 26

预期结果

我想实现的效果是在任何机型下或有凹形屏幕,都可以不被遮挡显示。

希望有人可以帮到我,这个问题,没有找到解决方案。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

ww545 commented 2 years ago

非常感谢,但是我这个问题没有解决,可能是模拟器机型的原因。 看来需要更多的原声知识

ww545 commented 2 years ago

解决了,在使用作者这种类似的库之后,然后在顶部加了10dp的上边距,然后背景色调整成和标题一个颜色。这样就不会顶着文字了。如果大家还有更好的办法,可以留言。