React Navigation 5.x Проблема с ящиком - PullRequest
Новая
       35

React Navigation 5.x Проблема с ящиком

1 голос
/ 01 мая 2020

Получение следующей проблемы при использовании Drawer. Стек и вкладка работают нормально без ящика. Кто-нибудь знает, что здесь происходит, и может мне помочь? введите описание изображения здесь

Вот файл навигатора, несколько строк кода: 

const Stack = createStackNavigator();
const FavStack = createStackNavigator();
const FilterStack = createStackNavigator();

const Tab =
  Platform.OS === "android"
    ? createMaterialBottomTabNavigator()
    : createBottomTabNavigator();

const defaultScreenOptions = {
  headerStyle: { backgroundColor: colors.primary },
  headerTintColor: "white",
};
function MealsNavigator() {
  return (
    <Stack.Navigator screenOptions={defaultScreenOptions}>
      <Stack.Screen name="Meals Categories" component={CategoriesScreen} />
      <Stack.Screen name="Profile" component={CategoryMealScreen} />
      <Stack.Screen name="Details" component={MealDetailsScreen} />
    </Stack.Navigator>
  );
}

function FavStackNavigator() {
  return (
    <FavStack.Navigator screenOptions={defaultScreenOptions}>
      <FavStack.Screen name="Favourites" component={FavouritesScreen} />
      <FavStack.Screen name="Details" component={MealDetailsScreen} />
    </FavStack.Navigator>
  );
}

function MealsFavTabNavigator() {
  return (
    <Tab.Navigator
      tabBarOptions={{ activeTintColor: colors.accent }}
      shifting={true}
    >
      <Tab.Screen
        name="All"
        component={MealsNavigator}
        options={{
          tabBarLabel: "Meals",
          tabBarIcon: (tabInfo) => (
            <Ionicons name="ios-restaurant" size={25} color={tabInfo.color} />
          ),
          tabBarColor: colors.primary,
        }}
      />
      <Tab.Screen
        name="Favourites"
        component={FavStackNavigator}
        options={{
          tabBarIcon: (tabInfo) => (
            <Ionicons name="ios-star" size={25} color={tabInfo.color} />
          ),
          tabBarColor: colors.accent,
        }}
      />
    </Tab.Navigator>
  );
}

function FilterStackNavigator() {
  return (
    <FilterStack.Navigator>
      <FilterStack.Screen name="Filters" component={FilterScreen} />
    </FilterStack.Navigator>
  );
}

const Drawer = createDrawerNavigator();

function MenuNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="MealFavs" component={MealsFavTabNavigator} />
      <Drawer.Screen name="Filters" component={FilterStackNavigator} />
    </Drawer.Navigator>
  );
}

export default MenuNavigator;

Вот приложение. js несколько строк кода: 

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);


  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return <NavigationContainer><MealsNavigator /></NavigationContainer>
}

Код не выдает ошибку без Drawer, он отлично работает со стеками и навигаторами вкладок!

...