Question

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

使用上述博客，我创建了底部导航栏。错误在第29行显示Tab.Screen的“ component”预定义属性应为大写。 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>
    );
  }
}

component是Tab.screen的属性，但仍然出现错误请帮我预先感谢

Answer 1

我正在返回“ NavigationContainer”，现在我可以将Tab.Navigator返回到我的App.js，之后我便可以获取底部的Navigator

我的App.js看起来像

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

我刚刚从BottomNavigation中删除了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

本机链接

现在我底部的导航栏运行正常。

底部导航不适用于本机

1 个答案: