React Native Expo应用打包一直卡住该如何解决？

先看你提供的App.js代码里存在几个关键问题，这些是导致打包卡住的大概率原因：

import { StyleSheet, Text, View, TextInput, Button, Image, KeyboardAvoidingView, Platform } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({});
  const [isPosting, setIsPosting] = useState(false)

  const validateForm = () => {
    let errors = {}

    if (!email) errors.email = "Email is required"
    if (!password) errors.password = "Password is required"

    setErrors(errors)

    return Object.keys(errors).length === 0;
  }

  const handleSubmit = async () => {
    if(validateForm()) {
      setIsPosting(true)
      console.log(email, password)
      // 问题1：无效的API地址"IP"
      const response = await fetch("IP", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          email: email,
          password: password
        })
      })
      console.log("Submitted:", email, password)
      const newP = await response.json()
      console.log(newP)
      setEmail("");
      setPassword("");
      setErrors({});
      setIsPosting(false)
    }
  }
  return (
    // 问题2：JSX里用了//注释，标准格式应该是{/* ... */}
    // makes the keyboard not interferre with the container that hass the username and apssswords
    <KeyboardAvoidingView 
      behavior="padding" 
      keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : -170} 
      style={styles.container}
    >
      <View style={styles.form}>
        {/* 问题3：无效的图片资源路径"icon location" */}
        <Image source={require("icon location")} style={styles.image} />
        <Text style={styles.label}>E-mail</Text>
        <TextInput 
          style={styles.input} 
          placeholder='Enter your E-mail' 
          value={email} 
          onChangeText={setEmail}
        />
        {
          errors.email ? <Text style={styles.errorText}>{errors.email}</Text> : null
        }
        <Text style={styles.label}>Passsword</Text>
        <TextInput 
          style={styles.input} 
          placeholder='Enter your password' 
          secureTextEntry 
          value={password} 
          onChangeText={setPassword}
        />
        {
          errors.password ? <Text style={styles.errorText}>{errors.password}</Text> : null
        }
        <Button title={isPosting ? "Logging in..." : "Login"} onPress={handleSubmit} />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: "center",
    paddingHorizontal: 20,
    backgroundColor: "f5f5f5"
  },

  form: {
    backgroundColor: "white",
    padding: 20,
    borderRadius: 10,
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },

  label: {
    fontSize: 16,
    marginBottom: 5,
    fontWeight: "bold",
  },

  input: {
    height: 40,
    borderColor: "#ddd",
    borderWidth: 1,
    marginBottom: 15,
    padding: 10,
    borderRadius: 5,
  },

  image: {
    width: 200,
    height: 200,
    alignSelf: "center",
    marginBottom: 50,
  },

  errorText: {
    color: "red",
    marginBottom: 10,
  },

});

针对性修复步骤 #

1. 修复图片资源路径
   把require("icon location")替换成实际存在的图片路径，比如你的项目默认会有assets/icon.png，就改成require('./assets/icon.png')；如果暂时不需要图片，直接注释掉这个Image组件。

2. 修正JSX注释格式
   将JSX中的单行//注释改成{/* ... */}，比如：

   {/* 防止键盘遮挡输入框 */}
   <KeyboardAvoidingView 
     behavior="padding" 
     keyboardVerticalOffset={Platform.OS === 'ios' ? 100 : -170} 
     style={styles.container}
   >
   

3. 替换无效API地址
   把fetch("IP")里的"IP"换成实际的后端接口地址，比如"http://192.168.1.100:3000/login"（根据你的后端服务地址调整）。

环境排查操作 #

如果修复代码后还是卡住，试试这些：

• 清除Expo缓存：执行npx expo start --clear，强制重置缓存后重新启动。
• 禁用VS Code扩展：某些代码检查、格式化类扩展可能干扰打包进程，先禁用所有扩展再启动项目。
• 换终端启动：不用VS Code内置终端，用系统自带的命令提示符/终端运行npm start。
• 检查Node版本：确保使用Expo兼容的Node LTS版本（如18.x或20.x），版本不兼容的话用nvm切换版本。

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