底部导航在react-native上不工作

Question

https:/reactnavigation.orgdocsmaterial-bottom-tab-navigator。

使用上面的博客，我创建了底部导航栏，在第29行 "component "的预定义属性Tab.Screen中出现错误，应该是大写的。在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中删除了NavigationContainer，但现在我的图标没有得到显示。

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.comobladorreact-native-vector-iconsissues463。 刚执行

反应式本地链接

现在我的底部导航栏完美地工作了。