无法访问导航道具

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

你需要将你的App包在一个 withRouter HoC或者你更新到React > 16.8并切换到useLocation钩子。此外，您只能访问 props.navigation 里面 RootStack.