react-native - 无法创建自定义 StackNavigator - “无法注册导航器”？

Question

我正在尝试创建一个自定义 StackNavigator 并将其分发到自定义包上。问题是当我想应用我的自定义堆栈时，我收到以下错误：

错误：无法注册导航器。您是否使用“NavigationContainer”包装了您的应用程序？

这是我的 App.tsx：

import { createThemedStack } from '@my-custom-package' 

//this is the reference to my custom navigator
const ThemedStack = createThemedStack()

function App() {
  return (
    <NavigationContainer>
      <ThemedStack.Navigator>
        <ThemedStack.Screen name='Screen 1' component={Screen1} />
        <ThemedStack.Screen name='Screen 2' component={Screen2} />
        ...
      </ThemedStack.Navigator>
    </NavigationContainer>
  )
}

export default App

ThemedStack.tsx - 在这里我想将一些自定义的常用样式应用于堆栈：

import * as React from 'react'
import { useNavigationBuilder, createNavigatorFactory, StackRouter } from '@react-navigation/native'
import { StackView } from '@react-navigation/stack'
// @ts-ignore
function ThemedStack({ initialRouteName, children, screenOptions, ...rest }) {
  const { state, descriptors, navigation } = useNavigationBuilder(StackRouter, {
    initialRouteName,
    children,
    screenOptions,
  })

  return <StackView {...rest} state={state} navigation={navigation} descriptors={descriptors} />
}

export default createNavigatorFactory(ThemedStack)

我究竟做错了什么？我不明白。ThemedStack 导航器位于 NavigationContainer 内。

我是根据https://reactnavigation.org/docs/custom-navigators/ RN Navigation docs 进行的，尽管他们没有说明在外部包结构中执行此操作。

提前致谢 ：）

标签： react-nativereact-navigationreact-navigation-v5react-navigation-stack

Answer 1

听起来你@react-navigation/native的包中有依赖项，导致安装了多个版本。你应该把它移到peerDependencies.