世博会，React Native错误：不变违规：“main”尚未注册，ReferenceError：属性“user”不存在，js引擎：hermes

Question

我正在 React Native 和 Expo go 上使用。 这个错误是在正常使用 React Native 时突然发生的。 我不记得具体是什么步骤，但它似乎是在我为函数组件内声明的 useState 变量或函数创建一个名为 useProductFetch 的钩子后开始发生的。 为了解决这个问题，我创建了一个新的项目文件夹，移动了文件，并重新安装了依赖项。但我反复收到此错误，并且我一直在寻找解决此问题的方法大约两天。为了解决错误“Invariant Violation：“main”尚未注册”，我在 app.json 和 package.json 中检查了我的“name”。没有任何问题。 这是我的代码。

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@reduxjs/toolkit": "^2.2.3",
    "axios": "^1.6.8",
    "expo": "~50.0.14",
    "expo-checkbox": "~2.7.0",
    "expo-image-picker": "~14.7.1",
    "expo-linear-gradient": "~12.7.2",
    "expo-location": "~16.5.5",
    "expo-media-library": "~15.9.2",
    "expo-radio-button": "^1.0.8",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "~3.6.2",
    "react-redux": "^9.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

这是在上述组件中使用自定义钩子的部分。

import { useProductFetch } from './useProductFetch';
import { primary_gray } from '../../styles/common/colors';
import { TouchMenu } from './touch_menu';
import { CreateReview } from './CreateReview';
import { AntDesign } from '@expo/vector-icons';

export const ProductDetail = () => {
  const {
    currentPage,
    currentProduct,
    handleHeart,
    handleHorizontalScroll,
    heart,
    isUsers,
    token,
    user,
    borderWidths,
    handlePress,
    activeMenu,
    navigation,
  } = useProductFetch();
//...
...//
}

以及自定义钩子代码：

export const useProductFetch = () => {
    const [heart, setHeart] = useState({});
    const { selectedProductId, currentProduct } = useSelector((state) => state.products);
    const [isUsers, setIsUsers] = useState(false);
    const dispatch = useDispatch();
    const navigation = useNavigation();
    const { user, token } = useSelector((state) => state.userAuth);
    const [currentPage, setCurrentPage] = useState(0);
    const [activeMenu, setActiveMenu] = useState(0);
    const borderWidths = [...Array(3)].map(() => useSharedValue(0));
    const { width } = Dimensions.get('window');
    const handleHorizontalScroll = (event) => {
    const contentOffsetX = event.nativeEvent.contentOffset.x;
    const currentPageIndex = Math.round(contentOffsetX / width);
    setCurrentPage(currentPageIndex);
  };

    const fetchDetail = useCallback(() => {
       if (selectedProductId) {
       try {
         dispatch(findProduct({ product_id: selectedProductId }));
         if (token) {
           ProductApi.isUsersProduct(token, selectedProductId).then((response) => {
             setIsUsers(response.data);
           });
         }
       } catch (error) {
         if (error.response) {
           switch (error.response.status) {
             case 400:
             case 500:
               navigation.navigate('Home');
           }
         }
       }
     }
   }, [selectedProductId]);

   useEffect(() => {
     borderWidths[activeMenu].value = withTiming(3, { duration: 500 });
   }, []);

   const handlePress = (index) => {
     setActiveMenu(index);
     borderWidths[index].value = withTiming(3, { duration: 500 });
   };

   useEffect(() => {
     fetchDetail();
   },  [fetchDetail]);

  useEffect(() => {
    if (currentProduct) {
      if (token && user) {
        if (currentProduct.likedBy.length > 0) {
          const isLiked = currentProduct.likedBy.some((val) => val.userId === user.id);
          setHeart((prevHeart) => ({
            ...prevHeart,
            [currentProduct.id]: isLiked,
          }));
        } else
          setHeart((prevHeart) => ({
            ...prevHeart,
            [currentProduct.id]: false,
          }));
      }
    }
  }, [currentProduct]);

  const handleHeart = () => {
    if (token && user && currentProduct) {
      setHeart((prevState) => ({ ...prevState, [currentProduct.id]: !heart[currentProduct.id] }));
      const data = { [currentProduct.id]: !heart[currentProduct.id] };
      try {
        dispatch(updateProductLike({ token, likes: data }));
      } catch (error) {
        if (error.response) {
          switch (error.response.status) {
            case 400:
            case 401:
            case 500:
              navigation.navigate('Home');
          }
        }
      }
    } else {
      alert('로그인이 필요합니다');
      navigation.navigate('Login');
      return;
    }
  };

  return {
    currentProduct,
    currentPage,
    handleHeart,
    handleHorizontalScroll,
    heart,
    isUsers,
    handlePress,
    borderWidths,
    activeMenu,
    navigation,
    user,
    token,
  };
};

如果上面的代码没有问题，我猜测可能是安装的依赖项存在兼容性问题。我在 StackOverflow 上发布的问题不多，所以请理解我的尴尬。 我想快速解决问题并专注于编码。

Answer 1

我认为你应该检查你的应用程序的 MainActivity （位于 android/app/src/main/java/your-package/MainActivity

检查 getMainComponentName 名称是否相同