标签: react-navigation-v6

在react-navigation v6的升级指南中：

https://reactnavigation.org/docs/upgrading-from-5.x/#ability-to-specify-a-type-for-root-navigator-when-using-typescript

它指出你可以使用

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

在代码中的某处为所有钩子等全局设置 RootParamList。

但是，当我尝试包含代码片段并设置我的参数列表时，我得到的只是

Duplicate identifier 'RootParamList'.ts(2300)
types.d.ts(5, 19): 'RootParamList' was also declared here

显然，该类型已经声明，我正在尝试覆盖它，但这似乎不可能。

有什么想法如何覆盖而不导致类型错误？

如何在react-navigation 6...中的特定屏幕中隐藏选项卡栏而不更改导航结构，因为它是此处文档中唯一可用的选项

我将应用程序更新为 React Navigation 6。在所有屏幕中，我自定义了headerBackImage，并添加了一些headerRight文本。在React Navigation 5中，如果headerTitle太长，它会被直接截断，并在标题末尾添加...，如下所示：

但在 React navigation 6 中，这个功能看起来发生了变化。我添加了一些背景颜色来向您展示标题的剪切：

我看到了这个主题：React Native Navigation Header title too long, 最终溢出，但也许 V6 中添加了新的 props。

这是我的屏幕：

<ProfileStack.Screen
    options={({ navigation }: ScreenProps) => ({
        headerTitle: 'My header title is not truncated why ?',
        headerTitleStyle: {
            backgroundColor: EColors.rouge,
        },
        headerBackImage: () => (
            <BackButton />
        ),
        headerTitleAlign: 'center',
        headerBackTitle: ' ',
        headerRight: () => (
            <Text
                onPress={() => navigation.navigate('toOtherScreen')}
                style={{ marginRight: 20, backgroundColor: EColors.vert }}
            >
                Infos …

根据版本6中的文档，我们可以像这样使用cardStyleInterpolator

import { CardStyleInterpolators } from '@react-navigation/stack';

// ...

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    title: 'Profile',
    cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
  }}
/>;

这意味着我们还必须安装@react-navigation/stack？因为此代码在反应导航 6 中不起作用。任何帮助将不胜感激。

在 React Navigation 6 中，我的研究表明，要在没有 prop 的情况下进行导航，我应该参考并使用createNavigationContainerRef. 我可以将屏幕名称传递给我dispatch，但由于某种原因，当我评估病情时，isReady我总是被告知事实并非如此。代码：

应用程序.js：

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import 'react-native-gesture-handler'

// Provider
import { Provider as AuthProvider } from './src/context/AuthContext'

// Navigation
import { navigationRef } from './src/navigation/NavRef'

// Screens
import ResolveAuthScreen from './src/screens/ResolveAuthScreen'

const App = () => {
  return (
    <AuthProvider>
      <NavigationContainer ref={navigationRef}>
        <ResolveAuthScreen />
      </NavigationContainer>
    </AuthProvider>
  )
}

export default App

ResolveAuthScreen.js：

import React, { useEffect, useContext } from 'react' …

React navigation V6 文档展示了在 useFocusEffect 中使用 useCallback 的示例。但是，当我使用相同的代码时，我遇到了无效的挂钩调用。

链接： https: //reactnavigation.org/docs/use-focus-effect/

例子：

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能会看到它的三个常见原因：

1. 您的 React 和 React DOM 版本可能不匹配。
2. 您可能违反了 Hooks 规则。
3. 您可能在同一个应用程序中拥有多个 React 副本。

据我了解，挂钩只能在函数组件的主体内部调用。但是，为什么文档中的上述示例不起作用？

包.json

 "@react-navigation/bottom-tabs": "^6.0.9",
 "@react-navigation/native": "^6.0.6",
 "@react-navigation/stack": "^6.0.11",
 "react": "17.0.2",
 "react-native": "0.65.1",

通过 React Navigation v6.x 并使用该.navigate()函数，新视图始终从右到左进行动画处理。

通常这很好，但我有几个视图总是想从左侧加载。

我尝试阅读与转换相关的文档、代码示例和 stackoverflow 线程，但无法收集到任何有用的信息。

任何人都可以给我一些指示吗？

干杯

在我的反应本机应用程序中，我有一个嵌套在抽屉导航器内的堆栈导航器。我希望在堆栈导航器页面中禁用抽屉。我正在使用反应导航 6。

在文档（https://reactnavigation.org/docs/drawer-navigator/#options）中，我看到有两个选项：gestureEnabled\xe2\x80\x8b和swipeEnabled\xe2\x80\x8b。但这些只能用于抽屉式屏幕，不能像我的情况那样用于堆叠式屏幕。

我的代码如下：

const Stack = createNativeStackNavigator<RootStackParamList>();\nconst Drawer = createDrawerNavigator<RootTabParamList>();\n\nconst loginStack = () => (\n  <Stack.Navigator>\n    <Stack.Screen name="LandingScreen" component={LandingScreen} options={{ headerShown: false }} />\n    <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }} />\n    <Stack.Screen\n      name="RegisterScreen"\n      component={RegisterScreen}\n      options={{ headerShown: false }}\n    />\n  </Stack.Navigator>\n);\n\nreturn (\n  <NavigationContainer>\n    <Drawer.Navigator\n      screenOptions={{\n        drawerStyle: { backgroundColor: \'white\' },\n        drawerPosition: \'right\',\n      }}\n    >\n      {!user ? (\n        <Drawer.Screen\n          name="PublicStack"\n          component={loginStack}\n          // options={{headerShown: false}}\n          options={({ route }) => {\n            const routeName …

我有一个堆栈导航器，其中有一些屏幕和一个初始路径，例如“个人资料”，当我通过“个人资料”屏幕导航到“选项”时navigation.navigate("Options")，我不想看到底部选项卡。这是我所拥有的示例：

ProfileNav.js

export default function ProfileNav () {
   return (
      <Stack.Navigator initialRoutName="Profile">
         <Stack.Screen name="Profile" component={ProfileScreen}>
         <Stack.Screen name="Options" component={OptionsScreen}>
      </Stack.Navigator>
   );
};

TabNav.js

export default function TabNav () {
   return (
      <Tab.Navigator initialRouteName="Home">
         <Tab.Screen name="Home" component={HomeScreen}>
         <Tab.Screen name="ProfileNav" component={ProfileNav}>
      </Tab.Navigator>
   );
};

我正在使用 React Navigation v6。我已经看到特定屏幕中的隐藏选项卡栏文档描述了如何交换屏幕以实现从单个屏幕隐藏选项卡，但在这种情况下，我试图让堆栈的父屏幕ProfileNav仍然显示底部选项卡，但我不希望堆栈中的其余屏幕显示它们，这不是文档帮助实现的目标，除非我错过了一些东西。

那么，如何从嵌套在选项卡导航器中的堆栈导航器的选择屏幕中隐藏底部选项卡呢？

我也尝试过tabBarVisible进入“选项”屏幕选项，但这不起作用。

我正在尝试将 React Navigation 6.x 包含到带有 Redux 的 React Native 项目中，因此需要能够从外部组件访问导航器。

我正在遵循本指南（不使用导航道具进行导航），并且具有与示例中基本相同的代码，其功能正常：

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

不过我也在使用 Typescript。

React Navigation 还有一个关于集成 Typescript 的指南（使用 TypeScript 进行类型检查），它展示了如何输入导航引用本身，这也很好用：

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

不过，没有输入该navigate函数的示例，而且我无法让任何东西发挥作用。

我认为解决方案是复制navigationRef.navigate()方法的类型（此处定义）并将其简单地应用于包装函数：

// navigationRef.navigate() typing...
//
// navigate<RouteName extends keyof ParamList>(
//   ...args: undefined extends ParamList[RouteName]
//     ? [screen: RouteName] | [screen: …