Question

在我的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;

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

Answer 1

您应该从tabBar属性中传递它，如下所示（我使用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>

因此，内部的HomeTab中有props.navigation。

Answer 2

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

将导航传递到BottomNavigation

2 个答案: