介紹

如果您從事過移動(dòng)應(yīng)用程序開發(fā)或前端開發(fā)，您可能熟悉使用 flexbox 設(shè)計(jì)應(yīng)用程序。如果您不知道，請(qǐng)不要擔(dān)心。堅(jiān)持本教程直到結(jié)束；您將了解 flexbox 布局的基礎(chǔ)知識(shí)和實(shí)現(xiàn)。

讓我們繼續(xù)我們的教程：React Native 應(yīng)用程序中的 Flexbox 布局，事不宜遲。

教程目標(biāo)

首先要知道我們的教程為您準(zhǔn)備了什么。因此，這些是我們將在這篇博文中介紹的主要部分。

• 關(guān)于 flexbox 布局的一般性討論

• 不同的 React Native 布局

• Flexbox 布局屬性

• 在 React Native 應(yīng)用程序中實(shí)現(xiàn) flexbox 布局

這么多知識(shí)，對(duì)吧？走向我們的第一部分。讓我們了解什么是 flexbox 并了解它的概念。

什么是 Flexbox：Flexbox 布局的基本概念

Flexible Box Module，通常稱為 flexbox，是一種處理應(yīng)用程序的一維布局的設(shè)計(jì)模型?，F(xiàn)在，這個(gè)一維布局意味著什么？很簡單，它表明 flexbox 的概念依賴于一次一個(gè)維度的布局——它可以是一行或一列。

此外，flexbox 提供了在界面項(xiàng)和強(qiáng)大的對(duì)齊功能之間分配空間的自由。Flexbox 布局通過減少應(yīng)用程序響應(yīng)問題讓開發(fā)人員的生活變得輕松。

Flexbox 布局的基本概念

Flexbox 的兩個(gè)軸

Flexbox 處理兩個(gè)軸 -

• 主軸：由屬性 flex-direction 定義

• 橫軸：垂直于主軸

開始和結(jié)束線

之前CSS對(duì)left-to-write的書寫方式給予了更多的重視，并將其設(shè)為默認(rèn)。但是，現(xiàn)代布局方法引入了廣泛的書寫模式。因此，它停止了文本行從文檔左上角開始到文檔右側(cè)結(jié)束的假設(shè)。

彈性容器

我們要應(yīng)用 flex 屬性的文檔區(qū)域可以說是一個(gè) flex 容器。要?jiǎng)?chuàng)建一個(gè)彈性容器，你只需要設(shè)置展示財(cái)產(chǎn)（該地區(qū)的容器）作為flex 或 inline-flex. 并且，該區(qū)域容器內(nèi)的物品將成為彈性物品。

正在尋找 React Native 開發(fā)人員來構(gòu)建高性能移動(dòng)應(yīng)用程序？
Bacancy 擁有最敬業(yè)和最熟練的開發(fā)人員。立即聯(lián)系我們并聘請(qǐng) React Native 開發(fā)人員！

React Native 布局差異

React Native 提供有限但足夠的 flexbox 布局屬性和值。主要區(qū)別是默認(rèn)情況下，所有 React Native 容器元素都是 Flex 容器。無需添加顯示：“彈性”. 它避免編寫額外的代碼。

請(qǐng)記住，父容器的子元素可以使用屬性 Flex 項(xiàng)目 - 'align-self' 進(jìn)行定位。這是應(yīng)用該屬性的示例對(duì)齊自我：彈性結(jié)束到包含子元素的 Flex 容器（最后一個(gè)框）。

以下是 React 原生開發(fā)的不同默認(rèn)值，使 flexbox 更具優(yōu)勢(shì)。

屬性：React Native 中的 Flexbox 布局

本節(jié)將討論可以增強(qiáng)應(yīng)用程序設(shè)計(jì)的 flexbox 屬性。

React Native 示例中的 Flexbox 布局

讓我們?cè)谖覀兊?React Native 應(yīng)用程序中實(shí)現(xiàn) flexbox。

我們的演示應(yīng)用程序?qū)⒂幸粋€(gè)包含三個(gè)框的父容器：

• 橙色盒子

• 白盒子

• 綠盒子。

父子容器是一個(gè)視圖組件。

// 布局const App = () => {
 返回 （
   <查看樣式={styles.container}>
     <View style={styles.orangeBox} />
     <View style={styles.whiteBox} />
     <View style={styles.greenBox} />
   </查看>
 );};// 風(fēng)格const styles = StyleSheet.create({
 容器： {
   背景顏色：'#454545'，
 },
 橙盒：{
   寬度：80，
   身高：80，
   背景顏色：'橙色'，
 },
 白盒：{
   寬度：80，
   身高：80，
   背景顏色：'白色'，
 },
 綠框：{
   寬度：80，
   身高：80，
   背景顏色：'藍(lán)色'，
 },});

輸出

反應(yīng)本機(jī) Flex

添加屬性為flex: 1后，空間被拆分成一個(gè)單獨(dú)的組；因此，我們的父容器將顯示在整個(gè)屏幕上。

容器： {
   彈性：1，
   背景顏色：'#454545'，
 },

輸出

React Native Flex 方向

flexDirection控制父容器的子元素的方向。以下是您可以添加到 flexDirection 的值。

• column – 這是默認(rèn)值。它從上到下對(duì)齊子元素。啟用換行后，下一行將從第一個(gè)項(xiàng)目的右側(cè)開始到頂部容器。

• 行——它從左到右對(duì)齊元素。下一行將在啟用包裝時(shí)從左側(cè)容器的第一個(gè)元素下開始。

• column-reverse——它以相反的順序排列元素——從下到上。啟用換行后，下一行將從第一個(gè)項(xiàng)目的右側(cè)開始到底部容器。

• row-reverse——它以相反的順序排列元素——從右到左。下一行將從第一個(gè)項(xiàng)目下開始到正確的容器以啟用包裝。

容器： {
   彈性：1，
   flexDirection: '行',
   背景顏色：'#454545'，
 },

輸出

React Native 證明內(nèi)容合理

justifyContent用于在父容器的主軸內(nèi)對(duì)齊子元素。您可以通過將 flexDirection 設(shè)置為行和列來水平和垂直設(shè)置元素。

該物業(yè)提供更多價(jià)值如下：

• flex-start- 這是默認(rèn)值。將元素與容器的主軸起點(diǎn)對(duì)齊。

• flex-end-將元素對(duì)齊到容器的主軸端。

• center- 將元素與容器的主軸中心對(duì)齊。

• space-between- 將元素均勻隔開，并在容器主軸上的子項(xiàng)之間平均分配剩余空間。

• space-around- 將元素均勻隔開，并將剩余空間分布在容器主軸上的子元素周圍。

• space-evenly- 均勻分布元素。相鄰項(xiàng)、第一項(xiàng)和主起始邊以及最后一項(xiàng)和主端邊之間的間距相同。

您可能喜歡閱讀：優(yōu)化React Native 應(yīng)用程序性能的終極指南

讓我們看幾個(gè)例子。

justifyContent: 'flex-start'

容器： {
   彈性：1，
   flexDirection: '行',
   justifyContent: 'flex-start',
   背景顏色：'#454545'，
 },

輸出

以下是用于屬性 justifyContent 的每個(gè)值的輸出屏幕截圖。

justifyContent: 'flex-end'

justifyContent: '中心'

justifyContent: 'space-around'

justifyContent: '空格'

justifyContent: '空間均勻'

React Native 對(duì)齊項(xiàng)目

alignItems用于將子項(xiàng)與其父容器的橫軸對(duì)齊。類似于與主軸對(duì)齊的 justifyContent，此屬性將使子項(xiàng)與橫軸對(duì)齊。

讓我們舉一些例子。

alignItems: 'flex-start'

容器： {
   彈性：1，
   flexDirection: '行',
   justifyContent: flex-start',
   對(duì)齊項(xiàng)目：彈性啟動(dòng)，
   背景顏色：'#454545'，
 },

輸出

以下是每個(gè)值的屏幕截圖。

alignItems: 'flex-end'

alignItems: '中心'

所以，這就是在 React Native 中理解和實(shí)現(xiàn)Flexbox 布局。我希望本教程的目的達(dá)到了您的預(yù)期。

Github 存儲(chǔ)庫：Flexbox React Native 示例

如果您想克隆存儲(chǔ)庫并使用代碼。這是 github 存儲(chǔ)庫：flexbox-layout-demo。

如果您想通過在線游戲界面進(jìn)行更多練習(xí)，那么您可以玩flexbox froggy游戲。

結(jié)論

言鼎科技主做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)。如有需要記得聯(lián)系我們！