Нижняя навигация не работает на реагировать родной

Question

https://reactnavigation.org/docs/material-bottom-tab-navigator

Используя вышеупомянутый блог, я создал нижнюю панель навигации. В строке 29 указано, что предопределенное свойство Tab "компонент" должно быть прописным. Ошибка в приложении

Это мой BottomNavigation. js file

import * as React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import NotificationsNoneIcon from '@material-ui/icons/NotificationsNone';
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import WbIncandescentOutlinedIcon from '@material-ui/icons/WbIncandescentOutlined';

import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      labeled="false"
      activeColor="black"
      labelStyle={{fontSize: 12}}
      //style={{ backgroundColor: "black" }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{tabBarIcon: () => <HomeOutlinedIcon />}}
      />
      <Tab.Screen
        name="AddDocument"
        component={AddDocument}
        options={{tabBarIcon: () => <AddCircleOutlineTwoToneIcon />}}
      />
      <Tab.Screen
        name="AddProject"
        component={AddProject}
        options={{tabBarIcon: () => <WbIncandescentOutlinedIcon />}}
        tabBarOptions={{showLabel: false}}
      />
      <Tab.Screen
        name="Notification"
        component={Notification}
        options={{tabBarIcon: () => <NotificationsNoneIcon />}}
      />
    </Tab.Navigator>
  );
}

export default class BottomNavigation extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }
}

является собственностью Tab.screen, но я все еще получаю ошибку Пожалуйста, помогите мне Заранее спасибо

Answer 1

Я возвращал «NavigationContainer», теперь я просто возвращаю Tab.Navigator в свое приложение. js После этого я могу получить нижний навигатор

Мое приложение. js выглядит как

export default function App() {
  return (
    <NavigationContainer>
      <BottomNavigation />
    </NavigationContainer>
  );
}

Я только что удалил NavigationContainer из BottomNavigation. Но теперь мой значок не отображается. Изменено BottomNavigation. js Файл

import * as React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

import HomeScreen from '../screens/HomeScreen';
import AddDocument from '../screens/Notification';
import Notification from '../screens/AddDocument';
import AddProject from '../screens/AddProject';

const Tab = createMaterialBottomTabNavigator();

export default function BottomNavigation(props) {
  return (
    <Tab.Navigator
      // labeled="false"
      labelStyle={{fontSize: 12}}
      inactiveColor="white"
      activeColor="white"
      //style={{backgroundColor: 'black'}}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              name="home-outline"
              color={color}
              size={26}
            />
          ),
        }}
      />
      <Tab.Screen
        name="AddDocument"
        component={AddDocument}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="addfile" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="AddProject"
        component={AddProject}
        options={{
          tabBarIcon: ({color}) => (
            <SimpleLineIcons name="magnifier-add" color={color} size={26} />
          ),
        }}
        tabBarOptions={{showLabel: false}}
      />
      <Tab.Screen
        name="Notification"
        component={Notification}
        options={{
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              name="bell-outline"
              color={color}
              size={26}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

Мои значки не отображались, поэтому я сослался на https://github.com/oblador/react-native-vector-icons/issues/463 только что выполнено

реагировать на родную ссылку

и теперь моя нижняя панель навигации работает отлично.