标签: react-navigation-v5

I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part.

With react-navigation 4 i had:

const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  signinFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  appFlow: createBottomTabNavigator({
    TrackCreate: TrackCreateScreen,
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen
    }),
    Account: AccountScreen,
  })
}, {
  initialRouteName: 'ResolveAuth'
});

然后我有一个包含 ResolveAuthScreen 组件的文件。

import React, { useEffect } from 'react';
import { connect } …

我正在尝试从 v4 迁移到 v5，他们已经删除了 createAppContainer 并表示要使用 NavigationContainer 来代替它。

我正在使用兼容性层文档中的 createCompatNavigatorFactory 内容。

之前，我将主导航器传递给 createAppContainer，然后使用该组件来包装整个应用程序。

现在文档说只需使用 NavigationContainer，但他们没有说明如何将其应用于使用兼容层的人。

这很令人困惑。我的代码看起来像这样：

const MainNavigator = createStackNavigator(...)
const AppNavigator = createAppNavigator(MainNavigator)

并在 App.js 中

render() {
   <View>
    <AppNavigator ref={navigationRef} />
  </View>
}

现在我已经切换到以下内容：

 const MainNavigator = createCompatNavigatorFactory(createStackNavigator)(...)

并在 App.js 中

render() {
   <View>
    <NavigationContainer ref={navigationRef} />
  </View>
}

我想知道如何将 navigationContainer 连接到 compat navigator 工厂函数制作的内容。我想知道为什么文档中没有任何关于此的内容......

我使用 react 导航版本创建了一个自定义抽屉导航器：5.X，但是当前活动选项卡没有在自定义抽屉菜单中突出显示。

1. 我在 DrawerItem 元素中添加了“activeTintColor”，但它没有应用于活动项目。
2. 我还在 drawerContentOptions 中添加了 activeTintColor。但也没有得到应用。他们有什么方法可以在自定义抽屉组件中使用这个常用选项吗？
3. 我在 DrawerItem 元素中使用了“图标”，根据反应导航文档，我在其中添加了默认道具（颜色、焦点、大小）。因此，图标的颜色为“灰色”（可能是默认行为）。如何更改此默认道具值？
4. “图标”中的默认道具“聚焦”也不起作用。所选选项卡的图标未更改。

请找到下面的代码图像。如果我犯了任何错误，请告诉我。

导航代码：

自定义抽屉组件：

当前活动标签：主页

我正在尝试将initialParam 属性传递到TabNavigator 屏幕。它旨在成为本地状态的登录部分，只是进行概念验证。它在堆栈导航器屏幕上运行良好，但route.params选项卡屏幕上的 未定义。我究竟做错了什么？

另外，我很确定就状态管理而言，这必须改变，但我想确保我可以简单地更改父级中的状态App并使其生效。它在堆栈屏幕上工作，这意味着我可以调用它setLoggedIn(true)，它将带我到选项卡导航器。但我已经回不去了...

const Track = () => {
  return (
    <TrackStack.Navigator>
      <TrackStack.Screen
        name='TrackListScreen'
        component={TrackListScreen}
      />
      <TrackStack.Screen
        name='TrackDetailScreen'
        component={TrackDetailScreen}
      />
    </TrackStack.Navigator>
  );
};

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      {loggedIn ? //is logged in 
        (
          <MainTab.Navigator>
            <MainTab.Screen
              name='TrackCreateScreen'
              component={TrackCreateScreen}
              initialParams={{ setLoggedIn }}
            />
            <MainTab.Screen
              name='AccountScreen'
              component={AccountScreen}
            />
            <MainTab.Screen
              name='Track'
              component={Track}
            />
          </MainTab.Navigator>
        ) : (
          <LoginStack.Navigator>
            <LoginStack.Screen
              name='SignupScreen'
              component={SignupScreen}
              initialParams={{ setLoggedIn }}
            />
            <LoginStack.Screen …

我正在使用react-native-testing-library，react-navigation从 4升级到 5 后，我按照以下说明进行操作：https : //callstack.github.io/react-native-testing-library/docs/react-navigation升级了我的大部分测试套件。

到现在为止还挺好。这里的关键基本上是将您的测试包装在一个中，NavigationContainer以便我的组件可以访问以前来自react-navigation-hooks.

当我的测试是同步的时，这很好用，但是一旦我将async关键字添加到测试函数中，我就会收到以下警告：

console.error
    Warning: An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more …

我在我的博览会应用程序中使用 @react-navigation/stack 并且一切正常。我想开始向我的应用程序添加选项卡/抽屉导航，并在尝试导入时不断遇到以下 2 个错误

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.

和

Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.

以下是我的 package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@reduxjs/toolkit": "^1.4.0",
    "expo": "~38.0.8", …

想象一下你有这个导航系统：

  -TabNavigator
      --TabA
          ---StackNavigatorA
             ----ScreenA
             ----StackNavigatorB
      --TabB
          ---StackNavigatorB
             ----ScreenB

有什么方法可以使用 React Navigation 5 获得最接近的父导航器名称？例如，如果我在屏幕“ScreenA”中并执行我需要的方法，这将返回“StackNavigatorA”

像这样的东西：

     const currentNavigator = navigation.getCurrentNavigator(); // <--- getCurrentNavigator doesn't exist, this is pseudocode.
     console.log(currentNavigator); // Will show the closest parent navigator

谢谢你。

我在我的react-native项目中使用React Navigation v5。

我有一个嵌套的堆栈导航器。

父堆栈导航器MyParentFlow有一个托管另一个堆栈导航器的屏幕组件：

const MyParentFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();

  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is the nested children stack navigator*/}
       <MyStack.Screen
         name={FLOWS.MyChildrenFlow}
         component={MyChildrenFlow}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

我的嵌套堆栈导航器MyChildrenFlow：

const MyChildrenFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();


  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is a child screen in the nested navigator*/}
       <MyStack.Screen 
         name="MyChildScreen"
         component={MyChildScreen}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

在嵌套堆栈导航器托管的子屏幕中：

const …

我正在使用 React Navigation v5，@react-navigation/bottom-tabs我的标签看起来像这样。

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Modal" component={ModalScreen} />
    <Tab.Screen name="Settings" component{SettingsScreen} />
  </Tab.Navigator>

我想在“主页和设置”选项卡上打开屏幕，但在“模式”选项卡上，我想打开一个模式，为此，使用 React Navigation v4，可以使用tabBarOnPress它来运行回调，但在 React Navigation v5 中不可用，tabBarOnPressReact Navigation v5有什么替代方案吗？

任何帮助，将不胜感激！

当前行为

嗨，大家好，

我想为底部选项卡设置背景颜色。所以我做了如下。

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

问题是 SafeArea 有白色背景

预期行为

我期望的是

那么你能告诉我如何在 React Navigation 版本 5 中解决这个问题吗？谢谢！

您的环境

iOS 反应原生：0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/bottom-tabs: ^5.0.5