使用 Stack Navigator (Expo) 时出现 NSRangeException 错误

Question

我正在尝试在我的 Expo 应用程序中创建堆栈导航，但是当我使用它时，当我尝试在手机上打开它时，我收到此错误：

NSRangeException: *** -[__NSArrayM objectAtIndexedSubscript:]: index 0 beyond bounds for empty array

RCTFatalException
facebook::react::RCTNativeModule::callSerializableNativeHook(unsigned int, folly::dynamic&&)
facebook::react::RCTNativeModule::callSerializableNativeHook(unsigned int, folly::dynamic&&)
facebook::react::JSIExecutor::nativeCallSyncHook(facebook::jsi::Value const*, unsigned long)
non-virtual thunk to reanimated::ReanimatedHermesRuntime::~ReanimatedHermesRuntime()
std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
facebook::hermes::HermesRuntimeImpl::HFContext::func(void*, hermes::vm::Runtime&, hermes::vm::NativeArgs)
hermes::vm::NativeFunction::_nativeCall(hermes::vm::NativeFunction*, hermes::vm::Runtime&)
hermes::vm::Interpreter::handleCallSlowPath(hermes::vm::Runtime&, hermes::vm::PinnedHermesValue*)
hermes::vm::CallResult<hermes::vm::HermesValue, (hermes::vm::detail::CallResultSpecialize)2> hermes::vm::Interpreter::interpretFunction<false, false>(hermes::vm::Runtime&, hermes::vm::InterpreterState&)
hermes::vm::Runtime::interpretFunctionImpl(hermes::vm::CodeBlock*)
hermes::vm::Runtime::runBytecode(std::__1::shared_ptr<hermes::hbc::BCProviderBase>&&, hermes::vm::RuntimeModuleFlags, llvh::StringRef, hermes::vm::Handle<hermes::vm::Environment>, hermes::vm::Handle<hermes::vm::HermesValue>)
facebook::hermes::HermesRuntimeImpl::evaluatePreparedJavaScript(std::__1::shared_ptr<facebook::jsi::PreparedJavaScript const> const&)
facebook::hermes::HermesRuntime::evaluateJavaScriptWithSourceMap(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&)
facebook::hermes::HermesRuntimeImpl::evaluateJavaScript(std::__1::shared_ptr<facebook::jsi::Buffer const> const&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> const&)
facebook::react::HermesExecutor::HermesExecutor(std::__1::shared_ptr<facebook::jsi::Runtime>, std::__1::shared_ptr<facebook::react::ExecutorDelegate>, std::__1::shared_ptr<facebook::react::MessageQueueThread>, std::__1::function<void (std::__1::function<void ()> const&, std::__1::function<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>> ()>)> const&, std::__1::function<void (facebook::jsi::Runtime&)>)
facebook::react::JSIExecutor::loadBundle(std::__1::unique_ptr<facebook::react::JSBigString const, std::__1::default_delete<facebook::react::JSBigString const>>, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char>>)
facebook::react::NativeToJsBridge::getDecoratedNativeMethodCallInvoker(std::__1::shared_ptr<facebook::react::NativeMethodCallInvoker>) const
facebook::react::NativeToJsBridge::getDecoratedNativeMethodCallInvoker(std::__1::shared_ptr<facebook::react::NativeMethodCallInvoker>) const
facebook::react::tryAndReturnError(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
5A6C1F41-BF70-32F6-A1D6-5B894DD21362
CFRunLoopRunSpecific
RCTConvertArrayValue
5623831D-5719-33A9-9691-759F47D714D1
_pthread_start
thread_start

这是App.js：

import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
// import { StatusBar } from 'expo-status-bar';
// import { StyleSheet, Text, View } from 'react-native';
import LandingPage from './components/LandingPage';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName='Landing' ///the name of the initial screen
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Landing" component={LandingPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果需要，可以快速绘制登陆页面：

import React from 'react';
import { View, Text, Button } from 'react-native';
//import SpinningEarth from './SpinningEarth';
import { useNavigation } from '@react-navigation/native';
import { colors, commonStyles } from '../styles/commonStyles';

const LandingPage = () => {
  // const navigation = useNavigation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.background }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text style={{ fontSize: 24, color: 'blue' }}>Town</Text>
        <Text style={{ fontSize: 24, color: 'green' }}>Trekkr</Text>
      </View>
      <View style={{ marginTop: 20 }}>
        <Button title="Sign Up" />
        <Button title="Login" />
      </View>
    </View>
  );
};

export default LandingPage;

如果我注释掉所有 StackNavigation 并让我的 App.js 返回

<LandingPage />

，它就可以正常工作并显示登录页面。我计划向导航添加更多页面，但我用堆栈中的另一个页面进行了测试，也得到了相同的错误。我尝试用谷歌搜索此错误，但找不到与我的问题出现位置相关的任何内容。难道是堆栈没有正确初始化？我已遵循堆栈导航器的 React-Native / Expo 指南（安装了所有需要的依赖项等）。

Answer 1

从代码中我看不出有问题，请尝试以下步骤来运行应用程序

• 将其导入到你的 app.js 之上

import 'react-native-gesture-handler'; 

• 删除node_modules、yarn.lock或package.lock
• 使用yarn或npm再次重新安装所有内容
• 尝试使用

  npx expo install --check

检查博览会的兼容版本
• 删除所有 apk 安装（如果除了 expo go）
• 使用

  npx expo start -c

  运行它以清除所有缓存

有时您只需要清除 dep 和缓存即可运行应用程序，如果遇到任何问题，请定期执行此操作。

如果仍然面临这个问题，请告诉我。

参考：https://reactnavigation.org/docs/stack-navigator/