使用导航堆栈时，Expo 应用程序在 Android 模拟器上崩溃

Question

大约一周前我刚进入 react native，我偶然发现了这个问题。

每次我将导航 stack/drawer 连接到我的家 app.js 然后我运行 expo 应用程序都会意外关闭。有时它会显示错误，但不到一秒钟就会关闭。但大多数时候它在关闭前从不显示错误。

我能够捕捉到一个错误，但我不确定它是否是短暂显示的错误。这是错误

unexpected identifier 'n'. Expected either in or if in enumeration syntax.

我不知道这个错误是从哪里来的。

我的App.js

    import Home from './screens/Home';
// import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading'
import { useFonts } from 'expo-font';
import React,{ useState } from 'react';
import Navigator from './routes/HomeStack'

export default function App() {
  const [fontLoaded] = useFonts({
    'nunitoBold': require('./assets/fonts/Nunito-Bold.ttf'),
    'nunitoRegular': require('./assets/fonts/Nunito-Regular.ttf'),
  })
    // const [fontLoaded,setFontLoaded] = useState(false)

    if (!fontLoaded) {
      return (
        <AppLoading/>
      )
    }else{
      return (
        <Home/>
      )
    }
}

我的HomeStack.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Details from "../screens/Details";
import Home from "../screens/Home";

const screens = {
    Home: {
        screen: Home,
    },
    ReviewDetails: {
        screen: Details,
    },
}

const HomeStack = createStackNavigator(screens, {
    defaultNavigationOptions: {
       headerStyle:{ backgroundColor: '#f00' },
       headerTintColor: '#444'
    }
})

export default createAppContainer(HomeStack);

我的Home.js

import React, { useState } from 'react'
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home({ navigation }) {
  const [reviews, setReviews] = useState([
    { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
  ]);
  return (
    <View style={globalStyles.container}>
      <FlatList 
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

这在昨天也很有效。我今天才开始收到这样的错误，我什至没有碰过我的代码。

我的package.json

{
  "name": "gamezone",
  "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",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-font": "~10.0.4",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Answer 1

我发现问题出在我同时安装了抽屉导航和堆栈导航。我也来自 netninja youtube 频道。卸载解决我的问题并按照更新的方式安装它。

使用导航堆栈时，Expo 应用程序在 Android 模拟器上崩溃

Expo app crashes on andriod emulator when using navigation stack

javascript

react-native

expo

react-navigation

react-native-flatlist