底部导航不适用于 react-native

Question

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

使用上面的博客，我创建了底部导航 bar.Error 说第 29 行 "component" 预定义属性 of Tab.Screen 应该是大写。 Error in App

这是我的 BottomNavigation.js 文件

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 返回到我的 App.js 之后，我能够获得底部导航器

我的App.js长得像

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

我刚刚从 BottomNavigation.But 中删除了 NavigationContainer，现在我的图标没有显示了。已修改 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 刚刚执行

react-native link

现在我的底部导航栏运行良好。

底部导航不适用于 react-native

Bottom navigation is not working on react-native

react-native

react-native-android

react-navigation