将导航传递给 BottomNavigation答案

【问题标题】：Passing navigation to BottomNavigation将导航传递给 BottomNavigation
【发布时间】：2020-09-21 21:37:13
【问题描述】：

在我的 React Native 应用程序中，我使用 react-navigation 版本 5。

如何将导航对象传递给BottomNavigation中的场景？

这是我创建 BottomNavigation 的组件：

import React from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import Vendors from '../vendors/VendorsStack';
   
// Routes
const homeRoute = () => <Home />;
const vendorsRoute = () => <Vendors />;
const scanRoute = () => <CodeScanner />;

const HomeTabs = (props) => {
   
   const [index, setIndex] = React.useState(0);
   
   const [routes] = React.useState([
      { key: 'home', title: 'Home', icon: 'newspaper-variant-multiple' },
      { key: 'vendors', title: 'Vendors', icon: 'storefront' },
      { key: 'codescanner', title: 'Scan', icon: 'qrcode-scan' }
   ]);
   
   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,
      vendors: vendorsRoute,
      codescanner: scanRoute
   });

   return (
      <BottomNavigation
         navigationState={{ index, routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HomeTabs;

在这段代码中，我确实在道具中有导航，但无法找到将导航传递到屏幕的方法。另请注意，供应商实际上是一个堆栈导航器。特别是，我需要访问导航以便打开其他屏幕。

【问题讨论】：

标签： react-native react-navigation react-navigation-v5 react-native-paper

【解决方案1】：

你应该从tabBar prop 传递它，如下所示（我使用TypeScript）和BottomTabBarProps：

export declare type BottomTabBarProps = BottomTabBarOptions & {
    state: TabNavigationState
    descriptors: BottomTabDescriptorMap
    navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
}

所以你将BottomTabBarProps 传递给你的自定义标签组件

<BottomTab.Navigator
    screenOptions={TabBarVisibleOnRootScreenOptions}
    initialRouteName={'Explore'}
    tabBar={(props: BottomTabBarProps) => <HomeTabs {...props} />}
>
    <BottomTab.Screen name="Explore" component={ExploreScreen} />
    ...
</BottomTab.Navigator>

所以内心的HomeTabs 你得到了props.navigation

【讨论】：

感谢您的回复，但我认为您的回复是针对作为 React Navigation 一部分的 BottomTabNavigator。我实际上正在使用 react-native-paper 的底部导航。我知道这是与 React Navigation 团队合作完成的，但文档非常差，到目前为止我还无法弄清楚如何传递道具/导航。我实际上也在考虑切换到 BottomTabNavigator。它肯定有更好的文档。
抱歉没有对纸做出反应，看起来更好的方法我也阅读了文档，而且真的很差而且很难理解。

【解决方案2】：

我认为您不需要将导航传递给 BottomNavigation。因为在 react-navigation v5 中，导航可以通过钩子访问任何地方阅读此文档https://reactnavigation.org/docs/connecting-navigation-prop/

【讨论】：

实际上在 BottomNavigation 中您无法访问 useNavigation 挂钩：“请注意，您不能在 tabBar 内使用 useNavigation 挂钩，因为 useNavigation 仅在屏幕内可用。您将获得 tabBar 的导航道具你可以改用" - reactnavigation.org/docs/bottom-tab-navigator