iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Mobile Development

30天React Native之旅:從入門到活用系列 第 9

Day 9:React Native樣式與佈局

  • 分享至 

  • xImage
  •  

樣式

在 React Native 中,樣式的編寫方式與 Web 上大致相同。它遵循 Web 上的 CSS 命名,但有一些差異和特點。

  • 駝峰命名法:
    在 React Native 的樣式中,屬性命名是用駝峰命名法。例如,background-color,在 React Native 中會是 backgroundColor。

  • style 樣式屬性:
    所有React Native核心組件都接受 style 樣式屬性,其值是 JavaScript 的物件或是陣列。

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'blue', fontSize: 20 }}>Hello, React Native!</Text>
    </View>
    
  • StyleSheet.create:
    隨著樣式逐漸增多,用上面內聯樣式撰寫可能會影響到代碼的複用性和維護性。這時,可以使用 StyleSheet.create 來獨立樣式。

    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    
    export default function App() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>Hello, React Native!</Text>
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#f5f5f5'
        },
        text: {
            color: 'blue',
            fontSize: 20
        }
    });
    
  • 合併與串聯樣式
    多個樣式可以用陣列形式連接。需注意當陣列中有多個樣式時,後面的樣式將覆蓋前面的樣式(對於相同的屬性)。

    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    
    function App() {
        return (
            <View style={styles.container}>
                <Text style={[styles.text, styles.textHighlight, styles.redText]}>Hello, React Native!</Text>
                <Text style={[styles.text, styles.greenText]}>Welcome to the world of mobile development!</Text>
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        text: {
            color: 'blue',
            fontSize: 20,
        },
        textHighlight: {
            textDecorationLine: 'underline',
            fontSize: 25,
        },
        redText: {
            color: 'red',
        },
        greenText: {
            color: 'green',
        },
    });
    
    export default App;
    

    在上述範例中:
    第一個 Text 組件先套用了 styles.text,然後是 styles.textHighlight,最後是 styles.redText。因此,文字的最終效果將是紅色、25像素大小、帶有下劃線的效果。

    第二個 Text 組件先套用了 styles.text,然後是 styles.greenText,所以其文字會是綠色的。

  • 不支援屬性與要留意之處
    撰寫樣式時,要留意 React Native 不完全支援所有的 Web CSS 屬性,並且有時不同平台效果並不一致,例如

    • 偽類與偽元素:如 :hover, :active, :focus::before::after 在 React Native 中都不支援。
    • 定位屬性:React Native 僅支援 position: relative 和 position: absolute。不能使用 position: fixed 來固定元件。
    • 光標屬性: 不支援 cursor 屬性。因移動設備上也沒有鼠標光標的概念。
    • 文字與框模型:有些 Web CSS 屬性,如 text-decoration, box-shadow, 和 column-count,在 React Native 中無直接支援或需另尋方法實現。
    • 平台差異:例如z-index、overflow在 Android 和 iOS 的呈現可能會有不同,需要留意,建議開發時定期在IOS和Android測試應用。
    • 陰影效果:iOS 提供 shadowColor、shadowOffset、shadowOpacity 和 shadowRadius 屬性,但 Android 則使用 elevation。

尺寸與單位

在 React Native 中,尺寸屬性如 width, height, fontSize 使用的是無單位的值。
這樣的設計是因為 Android 和 iOS 的尺寸單位有所不同,React Native選哪個都不好,乾脆無單位,在哪個平台渲染就自動為對應的平台轉換適當的尺寸單位。

<View style={{ width: 100, height: 100, backgroundColor: 'gray' }}>
    <Text style={{ fontSize: 16 }}>尺寸範例</Text>
</View>

在這個範例,Android上View的寬和高會被解讀為 100dp (density-independent pixels)。而fontSize 會被解讀為 16sp (scale-independent pixels)。而在IOS上所有的尺寸單位都會被解讀為 pt (points)。

另外,React Native 也支援以百分比設定寬高尺寸,不過需注意百分比必須使用字串格式,例如 "100%"。

佈局

React Native 主要採用在 Web 上普及的 FlexBox 佈局方式,並透過 Yoga 引擎將其轉換為原生佈局。FlexBox大部分前端開發者對此應該都不陌生,但考慮到有些人可能初次接觸,以下簡單介紹 FlexBox 的幾個概念,如果想暸解更多,網路上有很多寫得很好的FlexBox教學可以參考,像是六角學院Flexbox教學

  • flex:決定元件如何分配多餘的空間。
  • flexDirection:主軸的方向。可設為 row (水平) 或 column (垂直)。
  • justifyContent:主軸上的子元件對齊方式。例如:center, flex-start, flex-end, space-between 等。
  • alignItems:交叉軸上的對齊方式。
  • flexWrap:控制子元件是否可以多行排列。

React Native 的 FlexBox 和 Web 大致相同,但仍有些許差異需注意:

  • flexDirection:Web上預設是row,但在React Native 預設是 column,由上到下排列,這也是優先考慮到手機的設計。
  • alignItems:在 React Native 中,預設值是 alignItems:'stretch';而在 Web 上,預設為 align-items:'flex-start'
  • flex:Web CSS 的 flex 可接受多個參數,例如:flex: 2 2 10%;。但在 React Native 中,flex 只接受一個參數,代表比例。
  • 不支持的屬性:有些 FlexBox 屬性在 React Native 中不受支援,如 align-content, flex-basis, order, flex-flow, flex-grow 和 flex-shrink。

絕對位置與相對位置

  • relative(相對位置):
    React Native 中所有組件的position都預設為 relative。當我們給一個組件設置 top、bottom、left 或 right 值時,它會基於其在父組件中的位置移動。

  • absolute(絕對位置):
    當你想要一個組件脫離常規流,並特定固定在某個位置時,可以將 position 設置為 absolute, 這樣就會使組件脫離常規流,方便將組件設置在特定位置。

Ref

https://www.readfog.com/a/1634095388417953792
React Native布局详细指南


上一篇
Day 8:React Native常用API
下一篇
Day 10:原生開發基礎知識補充
系列文
30天React Native之旅:從入門到活用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言