Expo 使用 EAS build 時遇到的坑及解決方式

為何從 Expo build 改為 EAS build?

EAS build 是下一代 expo build 命令，Expo SDK 46 是支援 expo build 的最後一個版本，並且 expo build 將在 2023 年 1 月 4 日之後停止為所有 SDK 版本使用，在這之後都需要使用 EAS build。

EAS build 的優勢在於更易於處理簽名憑據、構建過程自動化，並且相較於 expo build，EAS build 的構建時間更短，安裝檔檔案大小也更小。

這篇文章主要是記錄我在使用 EAS build 時所遇到的坑及解決方式，皆為個人可行之解，並不適用於所有人，希望能給各位做參考。

APP 使用 react-native-picker-select 導致閃退

我的 APP 在 Expo 本地測試和生產模式下使用沒有任何問題，expo build 也沒有發生問題，但經過 EAS build 後一打開 APP 就閃退，沒跳任何錯誤訊息。經過排查後才發現，原來是因為我的登入頁使用了 react-native-picker-select 這個套件。

解決方式是再多安裝 @react-native-picker/picker，版本如下：

react-native-picker-select ^8.0.4
@react-native-picker/picker 2.2.1

其實人家官方文檔就已經有寫要多安裝個 @react-native-picker/picker 了，只是我沒看見。

StatusBar 沒透明效果

在 Expo 本地、生產模式測試及 expo build 後透明 statusBar 有正常運作，但經過 Eas build 後 statusBar 透明就失效了。

解決方式是可以使用 Expo 自帶的 expo-status-bar，安裝指令 expo install expo-status-bar。

使用方式如下：

import React from 'react';
import { Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

const App = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: '#000',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text style={{ color: '#fff' }}>
      Notice that the status bar has light text!
    </Text>
    <StatusBar backgroundColor="transparent" translucent />
  </View>
);

export default App;

還有檢查一下 app.json 是不是也設定了 statusBar，這可能導致你的 expo-status-bar 設定被覆蓋。

"androidStatusBar": {
   "barStyle": "dark-content",
   "translucent": true,
   "backgroundColor": "#00000000"
},

Eas build 如何使用環境變數

在構建配置過程中輸入 eas build:configure 指令後會產生 eas.json，在 eas.json 中加上 “env”，就可以讓應用在 eas build 後使用 process.env.xxxxxx 獲取到環境變數：

{
  "build": {
   "development": {
       "developmentClient": true,
       "distribution": "internal",
       "env": {
         "AMAP_KEY": "ecxxxxxxxxxxxxxxxxxxxxxe3",
         "API_LIST": "https://storage.googleapis.com/xxxxxxx/index.json"
       }
   },
   "preview": {
      "distribution": "internal",
      "android":{
         "buildType":"apk"
      },
      "env": {
         "AMAP_KEY": "ecxxxxxxxxxxxxxxxxxxxxxe3",
         "API_LIST": "https://storage.googleapis.com/xxxxxxx/index.json"
      }
    }
   // ...
  }
}