React Native iOS中的響應式佈局

Question

我即將將我的第一個React Native應用程序部署到iOS應用商店。但是，當涉及到佈局時，我遇到了問題。我正在使用Flexbox系統，目前正在爲iPhone 6進行設計。我已經完成了所有的模型和素描，並且擁有了我想要的所有功能。

但是，每當我嘗試在iPhone 4中運行應用程序時，我都遇到了問題。我爲iPhone 6實施的設計不符合iPhone 4擁有的約束條件。

我可以嘗試重新設計iPhone 4的東西，但隨後iPhone 6上的東西變得太小/醜陋。我真的需要在所有屏幕分辨率上看起來很棒（即iPhone 4 - iPhone 7 plus） 。

我在網上看到了很多不同的解決方案：對每個樣式表值應用一個常量，這取決於設備的高寬比;檢查設備並根據您的設備提供不同的組件;並更好地使用flexbox以使佈局響應。

第一個解決方案看起來並不像它會在每個屏幕大小上給出準確的表示，第二個解決方案似乎只是爲了樣式創建了過多的代碼，第三個解決方案似乎沒有考慮靜態大小和字體大小。

我通常會開始跟隨第三溶液，但也有一些事情，可簡單地不能在容器（例如，按鈕的高度，字體大小，一些餘量和填充等）

的百分比因此，我在問這個問題：在React Native中解決這個問題的最好方法是什麼？我真的需要一個徹底的實際答案，可以解釋開發過程中的最佳方式（例如，我應該設計最小的屏幕尺寸，然後適合更大尺寸？我應該爲所有分辨率設計嗎？等等。）。

對於那些已經感受到我的痛苦並已經發現一個很好的解決方案的人們，請提前致謝，請讓我知道該解決方案是什麼。

Answer 1

好吧，所以我想我現在明白如何去做。看起來iOS設計多屏尺寸的關鍵並不一定是在更大的手機上做更大的尺寸，更小的手機尺寸更小，而是設計適用於最小屏幕尺寸的產品，並讓產品在更大尺寸設備。

看起來，這種響應式設計背後的想法是，擁有更大手機的個人希望看到更多內容，而不是炸燬內容。因此，如果它適用於小手機，它也可以在大手機上工作。

以按鈕爲例：如果一個40pt的按鈕在iPhone 4s上看起來不錯，它也可以在iPhone 7 plus上正常工作。好處是iPhone 7 plus的用戶能夠看到更多的內容，而不僅僅是一個更大的按鈕。

這種設計還可以使多種屏幕尺寸不需要造型。

確定您所在設備的尺寸仍有一定作用，但這更多用於確定您是否能夠顯示更多內容（例如，在iPhone 5 vs iPhone 6的情況下，無論是否顯示一個額外的標籤按鈕），以及佈局（例如，我應該在哪裏放置菜單）。

您可以在大多數非常流行的Web應用程序本機應用程序中看到此類設計。

圖像和視頻是唯一的例外之一。當設備和設計需要它時，似乎有時會自動增長圖像。幸運的是，通過使用包含在react-native中的flexbox和響應式技術，這非常簡單。

我希望這可以幫助他人併爲他們節省一些時間。注意：這不提供橫向vs縱向的問題。在這種情況下，最好使用某種不同的風格。

Answer 2

我已閱讀關於Responsive Design in React Native的介質上的有用的博客。我沒有時間去嘗試，但我認爲它會解決你的問題，讓我知道它是如何爲你工作的。

Answer 3

我已經感覺到你的痛苦，並選擇類似於Shukarullah Shah提到的blog post的第一個類似解決方案。在我的style.js文件中，首先使用下面的命令獲取設備寬度和高度;

const x = Dimensions.get('window').width; 
const y = Dimensions.get('window').height; 

然後我劃分的每個維度，x和y，至10，20和40對於寬度，成爲像;

const widthS = x/40; // ~10 px 
const widthM = x/20; // ~20 px 
const widthL = x/10; // ~40 px 

然後我使用這些值到任何尺寸爲保證金，填充圖像大小等限定此外，我使用共同style.js文件我有每個組件。所以我定義了這些常量一次，我可以輕鬆地看到/比較每一個樣式。當然，你可以像提到的博客文章那樣改進這些定義。但我是一名開發人員，而不是設計師，所以我對完美比率沒有那麼急躁。