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 了,只是我沒看見。

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

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"
      }
    }
   // ...
  }
}
4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g Expo 使用 EAS build 時遇到的坑及解決方式
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論