无法访问导航道具

Question

我正在尝试使用我的自定义 NavBar 组件进行导航，这迫使我使用导航道具。问题是我收到导航道具未定义的错误。现在我正在定义我的嵌套导航器（我的一次尝试的结果）：

import React from "react";
import { StyleSheet, View } from "react-native";
import HomeScreen from "./screens/HomeScreen";
import SearchScreen from "./screens/SearchScreen";
import StatsScreen from "./screens/StatsScreen";
import ProfileScreen from "./screens/ProfileScreen";
import NavBar from "./components/NavBar";
import StaticTabbar from "./components/StaticNavBar";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { enableScreens } from "react-native-screens";

enableScreens();

function TabStack() {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ tabBarVisible: false }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{ tabBarVisible: false }}
      />
      <Tab.Screen
        name="Stats"
        component={StatsScreen}
        options={{ tabBarVisible: false }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarVisible: false }}
      />

      <Tab.Screen
        name="NavBar"
        component={NavBar}
        options={{ tabBarVisible: false }}
      />
      <Tab.Screen
        name="StaticNav"
        component={StaticTabbar}
        options={{ tabBarVisible: false }}
      />
    </Tab.Navigator>
  );
}
function RootStack() {
  const Root = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Root.Navigator>
        <Root.Screen
          name="First"
          component={TabStack}
          options={{ headerShown: false }}
        />
      </Root.Navigator>
    </NavigationContainer>
  );
}

const App = props => {
  return (
    <>
      <RootStack />
      <View style={styles.container}>
        <NavBar navigation={props.navigation} />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "rgba(0,0,0,0)",
    justifyContent: "flex-end",
    zIndex: 100,
    position: "absolute",
    bottom: 0
  }
});

export default App;

我将 NavBar 和 StaticTabbar 都标记为可以从它们访问导航道具的路线，但它似乎不起作用。我尝试手动传递它，因为定义导航的组件应该能够访问它，但它也不起作用。

Answer 1

您需要将您的应用程序包装在 withRouter HoC 中，或者您更新到 React > 16.8 并切换到 useLocation 挂钩。此外，您只能在RootStack 中访问props.navigation。