樣式

在 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布局详细指南