使用Expo Stack Navigator时出现NSRangeException错误

错误信息 #

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>
  );
}

LandingPage.js #

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;

问题描述 #

在Expo应用中实现Stack导航时，iOS端触发NSRangeException错误，提示数组越界。移除Stack导航代码直接渲染LandingPage时应用正常，添加其他页面到导航栈仍出现相同错误，已按指南安装所有依赖。

解决方案 #

• 调整react-native-gesture-handler导入位置：将import 'react-native-gesture-handler';移至App.js的第一行，确保它在任何React Native或导航相关导入之前，这是官方要求的初始化顺序：

  import 'react-native-gesture-handler';
  import React from 'react';
  // 其他导入...
  

• 清除Expo缓存：运行命令npx expo start --clear，彻底清除旧缓存后重新启动项目。
• 检查依赖版本兼容性：确保@react-navigation/native、@react-navigation/stack、react-native-screens、react-native-safe-area-context的版本与当前使用的Expo SDK版本匹配。可以通过npx expo install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context命令重新安装适配版本。
• 临时禁用Hermes引擎：如果上述步骤无效，可在app.json的expo字段中添加"jsEngine": "jsc"，切换到JavaScriptCore引擎测试：

  {
    "expo": {
      // 其他配置...
      "jsEngine": "jsc"
    }
  }
  

• 验证样式变量：检查../styles/commonStyles中的colors.background是否已正确定义，避免因未定义变量导致的间接渲染异常。

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