使用expo-router的JS Stack Navigator添加Screen遇报错求助

你遇到的问题核心是两个错误：

• 混用了Expo Router自带的Stack.Screen和自定义的JsStack导航器，自定义导航器必须使用它自身导出的Screen组件
• 手动添加了NavigationContainer，Expo Router已经内置了这个容器，重复引入会导致导航体系冲突

直接修改app/_layout.tsx代码如下：

import { View, StyleSheet } from 'react-native'
import { withLayoutContext } from 'expo-router'
import { ParamListBase, StackNavigationState } from '@react-navigation/native'
import {
  createStackNavigator,
  StackNavigationEventMap,
  StackNavigationOptions
} from '@react-navigation/stack'
import { NavigationBar } from '@/components'
import { Provider } from '@/provider'

const { Navigator, Screen } = createStackNavigator()

const JsStack = withLayoutContext<
  StackNavigationOptions,
  typeof Navigator,
  StackNavigationState<ParamListBase>,
  StackNavigationEventMap
>(Navigator)

export default () => {
  return (
    <Provider>
      <View style={styles.container}>
        <JsStack
          screenOptions={{
            headerShown: false
          }}
        >
          {/* 使用自定义导航器配套的Screen组件 */}
          <Screen name="posts/index" />
          <Screen name="posts/[id]" />
        </JsStack>
      </View>
    </Provider>
  )
}

// 补充样式定义示例
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

关键说明：

• 从createStackNavigator中同时解构出Navigator和Screen，这个Screen才是和自定义JsStack匹配的组件
• 移除多余的NavigationContainer，Expo Router会自动处理导航容器的初始化
• 不需要给Screen传component属性，Expo Router会根据name自动匹配对应路径的文件（比如posts/index对应app/posts/index.tsx，posts/[id]对应app/posts/[id].tsx）

这样修改后就能正常使用自定义栈导航器，同时保留Expo Router的文件路由特性。

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