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包装在{ success: false, message: <message> } HoC中，或者您将其更新为React> 16.8并切换到useLocation挂钩。另外，您只能在withRouter内部访问props.navigation。

无法访问导航道具

1 个答案: