Нет доступа к навигации - PullRequest
Новая
       58

Нет доступа к навигации

0 голосов
/ 16 июня 2020

Я пытаюсь перемещаться, используя свой собственный компонент 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 как маршруты, чтобы иметь доступ к ним, но это не так. кажется, не работает. Я попытался передать его вручную, так как компонент, в котором определена навигация, должен иметь к нему доступ, но это также не сработало.

1 Ответ

0 голосов
/ 16 июня 2020

Вам нужно обернуть ваше приложение в withRouter Ho C или вы обновитесь до React> 16.8 и переключитесь на хуки useLocation. Кроме того, вы можете получить доступ только к props.navigation внутри RootStack.

...