Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.3k views
in Technique[技术] by (71.8m points)

Correct Way of Calculating the iOS Content Inset in React Native

What is the correct way of calculating the content insets (https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset) in a react native project?

E.g. when you use padding: 20 on the root view of the application/screen, it aligns with the native navigation title on an iPhone 11. On an iPhone 12 Pro, on the other hand, these content insets seem to be different and the content has an offset:

Screenshot of wrong alignment

I also found an example of using 5% of the device width as the content inset/padding, but this still doesn't fit on all devices.

This is how it looks in the apple design guidelines (margins): Apple Design Guidelines

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As I didn't find any solution for this, I created a small library for it: https://github.com/dioncodes/react-native-layout-margins


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...