基本使用

將文字放入組件之間

<Text>hello world</Text>

這段程式碼會在APP中顯示"hello world"。

字體屬性

fontSize: 用於設定字體大小的，值為數字。

<Text style={{ fontSize: 20 }}>hello world</Text>

fontWeight: 用於設定文字粗細。其值可以是100到900之間的數字，也可以是'bold'或'normal'。例如：

<Text style={{ fontWeight: 'bold' }}>粗體文字</Text>

要注意的是在Android平台上，fontWeight只援'bold'和'normal'這兩種狀態。所以以跨平台一致性角度，建議開發時只做bold、normal，大多情況這兩種也就夠用了。

fontFamily: 用於設定文字的字體。
若想使用自定義字體，一種方法是將字體放入原生ios和android對應的資料夾中，過程稍為繁瑣。

這裡建議另一種自定義字體的方法

1. 配置react-native.config.js

   • 在項目的根目錄下檢查是否存在react-native.config.js。若不存在，創建一個。
   • 在react-native.config.js中加入以下配置：

   module.exports = {
     project: {
       ios: {},
       android: {},
     },
     assets: ["./assets/fonts/"],
   };
   

2. 建立目錄

   • 在項目的根目錄下創建一個名為assets的資料夾（如果還沒有）。
   • 在assets資料夾內部再創建一個名為fonts的資料夾。
   • 把字體文件（例如 .ttf 或 .otf）移至assets/fonts/資料夾。

3. 鏈接資源

   • 執行自動鏈接命令

     npx react-native-asset
     

4. 在React Native中使用自定義字體，例如這裡是"Monday Donuts"

   <Text style={{fontFamily: "Monday Donuts", fontSize: 30}}>這是Monday Donuts字體</Text>
   

5. 重新啟動應用
   關閉當前正在運行的Metro Bundler，然後重新執行

6. 完成!
   

在實際項目，中文通常不會用自定義字體，因為中文字太多，如果將整個字體文件放入應用程式中，會造成文件過大，影響App的效能，通常都是用在數字、英文。

行數屬性

numberOfLines： 用於設定文字行數。例如設定 numberOfLines={2}，則只有前兩行的文字會被顯示。
ellipsizeMode： 定義當文字超出行數或容器大小時，如何顯示省略符號的屬性。默認為"tail"，末尾顯示。
selectable： 設定文字是否可以被選中。當設為 true 時，使用者可以長按並選擇文字。
selectColor： 與selectable搭配使用，定義當文字被選擇時的背景顏色。

點擊

<Text>組件支持點擊事件，所以還可以將它當作按鈕或鏈接。
onPress： 文字被點擊時觸發的事件
onLongPress： 長按時觸發的事件。

<Text onPress={() => alert('Text被點擊了!')}>點擊我</Text>
<Text onLongPress={() => alert('Text被長按了!')}>長按我</Text>

是否跟隨系統變化

allowFontScaling： 設定字體是否跟隨系統變化。有時候希望UI佈局固定，不要隨著系統變大，可以將此屬性設為false。

嵌套文字

<Text>組件允許嵌套使用，讓我們達成一些特別的效果。

<Text style={{fontSize: 20}}>
  公司有<Text style={{color: 'red'}}>100</Text>位員工。
</Text>

文字陰影

陰影的三個關鍵屬性

• textShadowColor
  陰影的顏色。可以是任何顏色，如'black'或'rgba(0, 0, 0, 0.5)'。
• textShadowOffset
  一個物件，設定陰影的水平和垂直位移。width控制水平位移，而height控制垂直位移

  textShadowOffset: { width: 2, height: 2 }
  

  上述範例代表：陰影向右偏移2個單位，向下偏移2個單位。
• textShadowRadius
  陰影模糊半徑，可以使陰影邊緣看起來更柔和。增加這個值會使陰影更加模糊，減少會更銳利。

範例

<Text style={{ 
    fontSize: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.5)',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 5
}}>
    這是帶有陰影的文字
</Text>

小結

在React Native中，所有文字呈現都是用<Text/>來完成的，是一個使用率非常高的組件，所以掌握<Text/>組件的各種用法，是很有幫助的，也能幫助我們做出使用體驗更好的APP。