React Native应用Expo Go正常，iOS侧载后启动页崩溃求助

开发者阿泽

2026-7-6

React Native应用EAS构建侧载真机后启动崩溃问题

我开发了一款React Native应用，在Expo Go中运行完全正常且无报错，但通过EAS build构建iOS模拟器版本，将生成的.app文件转换为.ipa侧载到真机后，一到启动页就崩溃。

代码文件

App.js

import React, { useState } from 'react';
import { View, Text, TextInput, Button, ScrollView, StyleSheet } from 'react-native';

export default function App() {
  const [ip, setIp] = useState('');
  const [serial, setSerial] = useState('');
  const [ipInput, setIpInput] = useState('');
  const [serialInput, setSerialInput] = useState('');

  const fetchRequest = async (url) => {
    try {
      const response = await fetch(url);
      console.log('Request sent:', response);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const sleep = (milliseconds) => {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
  };

  const avec = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/assume_behavior_control?serial=${serial}`);
      await sleep(1000);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const rvec = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/release_behavior_control?serial=${serial}`);
      await sleep(1000);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const fw = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/move_wheels?lw=140&rw=140&serial=${serial}`);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const left = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/move_wheels?lw=-150&rw=150&serial=${serial}`);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const bc = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/move_wheels?lw=-150&rw=-150&serial=${serial}`);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const stop = async () => {
    if (ip && serial) {
      fetchRequest(`http://${ip}/api-sdk/move_wheels?lw=0&rw=0&serial=${serial}`);
    } else {
      console.error('IP or serial is missing.');
    }
  };

  const setIPAndSerial = () => {
    if (ipInput && serialInput) {
      setIp(ipInput);
      setSerial(serialInput);
    } else {
      console.error('Please enter IP and serial.');
    }
  };

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.title}>Vector Control w/wirepod</Text>
        <TextInput
          style={styles.input}
          label="Enter IP Address"
          placeholder="IP of wire-pod"
          value={ipInput}
          onChangeText={text => setIpInput(text)}
        />
        <TextInput
          style={styles.input}
          label="Enter Serial Number"
          placeholder="Serial of Vector"
          value={serialInput}
          onChangeText={text => setSerialInput(text)}
        />
        <Button title="Set IP and Serial" onPress={setIPAndSerial} style={styles.button} />
        <Button title="Assume Behaviour Control" onPress={avec} style={styles.button} />
        <Button title="Release Behaviour Control" onPress={rvec} style={styles.button} />
        <Button title="Move Forward" onPress={fw} style={styles.button} />
        <Button title="Move Left" onPress={left} style={styles.button} />
        <Button title="Move Back" onPress={bc} style={styles.button} />
        <Button title="Stop" onPress={stop} style={styles.button} />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    width: '80%',
    marginTop: '40%', // Adjust the margin to move content down
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  input: {
    marginBottom: 10,
    width: '200 %',
    borderWidth: 1,
    padding: 8,
    borderRadius: 5,
  },
  button: {
    marginBottom: 10,
    width: '100%',
    padding: 10,
    backgroundColor: 'blue',
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

package.json

{
  "name": "wire-pod",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-community/blur": "^4.3.2",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-paper": "^5.11.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-svg": "13.9.0",
    "react-native-ui-lib": "^7.9.1",
    "react-native-vector-icons": "^10.0.1",
    "expo-splash-screen": "~0.20.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

问题排查与解决方案

1. 架构不兼容（最可能原因）

你构建的是iOS模拟器版本（x86架构），但侧载到真机（arm64架构），架构不匹配会直接导致启动崩溃。

解决：用EAS构建真机版本，执行命令：
```
eas build --platform ios --profile production
```
也可在eas.json中配置专门的真机profile，确保构建目标为arm64。

2. 依赖冲突或兼容性问题

部分第三方依赖在Expo Go中可正常运行，但原生构建时可能出现适配问题：

替换@react-native-community/blur为Expo官方的expo-blur，更适配Expo环境：
```
expo install expo-blur
```
之后删除@react-native-community/blur依赖。
移除未使用的依赖：你的App.js仅用到React Native基础组件，native-base、react-native-ui-lib等未实际使用的依赖建议删除，减少冲突概率。

3. 网络权限配置缺失

应用使用HTTP请求，iOS 14+默认阻止非HTTPS请求，需配置权限：

在app.json/app.config.js中添加：

"ios": {
  "infoPlist": {
    "NSAppTransportSecurity": {
      "NSAllowsArbitraryLoads": true
    }
  }
}

4. 代码细节修复

StyleSheet里width: '200 %'存在空格，应改为'200%'，虽不一定直接导致崩溃，但修复后可避免潜在布局异常。

5. 启动页配置检查

确认expo-splash-screen的配置，保证app.json中splash字段的图片资源路径正确、格式符合iOS要求。

内容的提问来源于stack exchange，提问作者Joshua