React-Navigation 5 TypeError: невозможно прочитать свойство'_context 'из undefined, эта ошибка находится в forwardRef (BaseNavigationContainer) - PullRequest
Новая
       7

React-Navigation 5 TypeError: невозможно прочитать свойство'_context 'из undefined, эта ошибка находится в forwardRef (BaseNavigationContainer)

0 голосов
/ 28 мая 2020

Я использую React-Navigation.5 при выполнении меню нижней вкладки, я получаю следующие ошибки

TypeError: не удается прочитать свойство_context из undefined

эта ошибка находится в в forwardRef (BaseNavigationContainer) (в navigationcontainer.tsx) в themeProvider (в NavigationContainer.tsx.) в FOrwardRef (NavigationContainer)

Требуемый цикл: node_modules@react-navigation \ core \ src \ BaseNavigationContainer.tsx -> node_modules@react-navigation \ core \ src \ useOptionsGetters.tsx -> node_modules@react-navigation \ core \ src \ BaseNavigationContainer.tsx

My app. js code 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useEffect, Component } from 'react';
// import { Button, View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerItems } from '@react-navigation/drawer';
import { NavigationActions } from '@react-navigation/compat';


import 'react-native-gesture-handler';

// import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/FontAwesome5';
// import Icon from 'react-native-vector-icons/FontAwesome';


import HomeScreen from './screens/HomeScreen';
import AddPostScreen from './screens/AddPostScreen';
import ProfileScreen from './screens/ProfileScreen';
import SearchScreen from './screens/SearchScreen';
import SavedPostsScreen from './screens/SavedPostsScreen';
import CommentsScreen from './screens/CommentsScreen';

import LogInScreen from './screens/LogInScreen';
import RegisterScreen from './screens/RegisterScreen';
import EditProfileScreen from './screens/EditProfileScreen';
import EditMobileScreen from './screens/EditMobileScreen';
import EditPasswordScreen from './screens/EditPasswordScreen';
import EditProfilePicScreen from './screens/EditProfilePicScreen';
import ProfilePostsScreen from './screens/ProfilePostsScreen';
import UsersProfileScreen from './screens/UsersProfileScreen';
import UsersPostsScreen from './screens/UsersPostsScreen';
import ViewPostScreen from './screens/ViewPostScreen';
import FollowersListScreen from './screens/FoollwersListScreen';
import FollowingListScreen from './screens/FollowingListScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import EditForgotPasswordScreen from './screens/EditForgotPasswordScreen';

import SettingsScreen from './screens/SettingsScreen';
import ContactScreen from './screens/ContactScreen';

import { enableScreens } from 'react-native-screens';
enableScreens();


import AuthScreen from './screens/AuthScreen';

import Example from './screens/Example';




const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // tabBarLabel: 'Home!'
        }}
      />
      <HomeStack.Screen
        name="LogIn"
        component={LogInScreen}
        options={{
          headerTitle: 'LogIn',
          tabBarLabel: 'Login!'
        }}
      />
      <HomeStack.Screen
        name="Register"
        component={RegisterScreen}
        options={{
          headerTitle: 'Register',
          tabBarLabel: 'Register!'
        }}
      />
      <HomeStack.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{
          headerTitle: 'Forgot Password',
          tabBarLabel: 'Forgot Password!'
        }}
      />
      <HomeStack.Screen
        name="UsersProfile"
        component={UsersProfileScreen}
        options={{
          headerTitle: 'Users Profile',
          tabBarLabel: 'Users Profile!'
        }}
      />
      <HomeStack.Screen
        name="UsersPosts"
        component={UsersPostsScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'Users Posts',
          tabBarLabel: 'Users Posts!'
        }}
      />
      <HomeStack.Screen
        name="Comments"
        component={CommentsScreen}
        options={{
          headerTitle: 'Comments',
          tabBarLabel: 'Comments!'
        }}
      />

    </HomeStack.Navigator>
  );
}



const SearchStack = createStackNavigator();
function SearchStackScreen() {
  return (
    <SearchStack.Navigator>
      <SearchStack.Screen
        name="Search"
        component={SearchScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'Search',
          tabBarLabel: 'Search!'
        }}
      />
      <SearchStack.Screen
        name="UsersProfile"
        component={UsersProfileScreen}
        options={{
          // headerTitle: 'Users Profile',
          tabBarLabel: 'UsersProfile!'
        }}
      />
      <SearchStack.Screen
        name="UsersPosts"
        component={UsersPostsScreen}
        options={{
          // headerTitle: ' Users Posts',
          tabBarLabel: ' Users Posts!'
        }}
      />
      <SearchStack.Screen
        name="ViewPost"
        component={ViewPostScreen}
        options={{
          // headerTitle: 'View Post',
          tabBarLabel: 'View Post!'
        }}
      />
    </SearchStack.Navigator>
  );
}



const AddPostStack = createStackNavigator();
function AddPostStackScreen() {
  return (
    <AddPostStack.Navigator>
      <AddPostStack.Screen
        name="AddPost"
        component={AddPostScreen}
        options={{
          headerTitle: 'AddPost',
          tabBarLabel: 'AddPost!'
        }}
      />
      <AddPostStack.Screen
        name="LogIn"
        component={LogInScreen}
        options={{
          headerTitle: 'LogIn',
          tabBarLabel: 'Login!'
        }}
      />
      <AddPostStack.Screen
        name="Register"
        component={RegisterScreen}
        options={{
          headerTitle: 'Register',
          tabBarLabel: 'Register!'
        }}
      />
      <AddPostStack.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{
          headerTitle: 'Forgot Password',
          tabBarLabel: 'Forgot Password!'
        }}
      />
    </AddPostStack.Navigator>
  );
}


const SavedPostsStack = createStackNavigator();
function SavedPostsStackScreen() {
  return (
    <SavedPostsStack.Navigator>
      <SavedPostsStack.Screen
        name="SavedPosts"
        component={SavedPostsScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'SavedPosts',
          tabBarLabel: 'SavedPosts!'
        }}
      />
      <SavedPostsStack.Screen
        name="LogIn"
        component={LogInScreen}
        options={{
          headerTitle: 'LogIn',
          tabBarLabel: 'Login!'
        }}
      />
      <SavedPostsStack.Screen
        name="Register"
        component={RegisterScreen}
        options={{
          headerTitle: 'Register',
          tabBarLabel: 'Register!'
        }}
      />
      <SavedPostsStack.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{
          headerTitle: 'Forgot Password',
          tabBarLabel: 'Forgot Password!'
        }}
      />
      <SavedPostsStack.Screen
        name="Comments"
        component={CommentsScreen}
        options={{
          headerTitle: 'Comments',
          tabBarLabel: 'Comments!'
        }}
      />
    </SavedPostsStack.Navigator>
  );
}



const ProfileStack = createStackNavigator();
const ProfileStackScreen = () => {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'Profile',
          // tabBarLabel: 'profile!'
        }}
      />
      <ProfileStack.Screen
        name="LogIn"
        component={LogInScreen}
        options={{
          headerTitle: 'LogIn',
          tabBarLabel: 'Login!'
        }}
      />
      <ProfileStack.Screen
        name="Register"
        component={RegisterScreen}
        options={{
          headerTitle: 'Register',
          tabBarLabel: 'Register!'
        }}
      />
      <ProfileStack.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{
          headerTitle: 'Forgot Password',
          tabBarLabel: 'Forgot Password!'
        }}
      />
      <ProfileStack.Screen
        name="EditProfile"
        component={EditProfileScreen}
        options={{
          headerTitle: 'Edit Profile',
          tabBarLabel: 'Edit Profile!'
        }}
      />
      <ProfileStack.Screen
        name=" EditPassword"
        component={EditPasswordScreen}
        options={{
          headerTitle: ' Edit Password',
          tabBarLabel: ' Edit Password!'
        }}
      />
      <ProfileStack.Screen
        name="EditMobile"
        component={EditMobileScreen}
        options={{
          headerTitle: 'Edit Mobile',
          tabBarLabel: 'Edit Mobile!'
        }}
      />
      <ProfileStack.Screen
        name="EditProfilePic"
        component={EditProfilePicScreen}
        options={{
          headerTitle: 'Edit ProfilePic',
          tabBarLabel: 'Edit ProfilePic!'
        }}
      />
      <ProfileStack.Screen
        name="EditForgotPassword"
        component={EditForgotPasswordScreen}
        options={{
          headerTitle: 'Edit ForgotPassword',
          tabBarLabel: 'Edit ForgotPassword!'
        }}
      />
      <ProfileStack.Screen
        name="ProfilePosts"
        component={ProfilePostsScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'Profile Posts',
          tabBarLabel: 'Profile Posts!'
        }}
      />
      <ProfileStack.Screen
        name="FollowersList"
        component={FollowersListScreen}
        options={{
          headerTitle: 'Followers List',
          tabBarLabel: 'Followers List!'
        }}
      />
      <ProfileStack.Screen
        name="FollowingList"
        component={FollowingListScreen}
        options={{
          headerTitle: 'Following List',
          tabBarLabel: 'Following List!'
        }}
      />
      <ProfileStack.Screen
        name="UsersProfile"
        component={UsersProfileScreen}
        options={{
          headerTitle: 'Users Profile',
          tabBarLabel: 'Users Profile!'
        }}
      />
      <ProfileStack.Screen
        name="UsersPosts"
        component={UsersPostsScreen}
        options={{
          headerShown: false,
          headerTitle: false,
          // headerTitle: 'Users Posts',
          tabBarLabel: 'Users Posts!'
        }}
      />

    </ProfileStack.Navigator>
  );
}




const AppTabs = createBottomTabNavigator();
const AppTabsScreen = () => (
  <AppTabs.Navigator
    tabBarOptions={{
      activeTintColor: '#00a63f',
      inactiveTintColor: '#010203',
      labelStyle: {
        fontSize: 12,
        fontWeight: 'bold'
      },
      style: {
        backgroundColor: '#ffffff',
        justifyContent: 'center',
      },
      // showIcon: true,
      // showLabel: true,
      // tabStyle: { height: 50, backgroundColor: '#f0ffff' },
      // indicatorStyle: { backgroundColor: 'red', },
      // iconStyle: { width: '100%' },
    }}
  // lazy={true}
  >
    <AppTabs.Screen
      name="Home"
      component={HomeStackScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Icon name="home" color={color} size={size} solid />
        ),
      }}
    />
    <AppTabs.Screen
      name="Search"
      component={SearchStackScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Icon name="search" color={color} size={size} solid />
        ),
      }}
    />

    <AppTabs.Screen
      name="AddPost"
      component={AddPostStackScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Icon name="plus-circle" color={color} size={size} solid />
        ),
      }}
    />
    <AppTabs.Screen
      name="SavedPosts"
      component={SavedPostsStackScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Icon name="save" color={color} size={size} />
        ),
      }}
    />

    <AppTabs.Screen
      name="Profile"
      component={ProfileStackScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
          <Icon name="user" color={color} size={size} />
        ),
      }}
    />


  </AppTabs.Navigator >
);


const AppDrawer = createDrawerNavigator();
const AppDrawerScreen = () => (
  <AppDrawer.Navigator>
    <AppDrawer.Screen name="Home-Screen" component={AppTabsScreen} />
    <AppDrawer.Screen name="Settings" component={SettingsScreen} />
    <AppDrawer.Screen name="Contact" component={ContactScreen} />
  </AppDrawer.Navigator>
);

// const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>

       <AppDrawerScreen />


    </NavigationContainer>


  );
}

Если кто знает решение для ошибка подскажите пожалуйста

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...