react-native - React Native 底部导航栏

Question

我正在尝试构建一个底部导航栏，一切正常，但导航栏不显示。我对原生反应也有点陌生。我觉得问题在于导出默认值，因为它没有将对象作为 App 注册表。

其他文件也可以，就像没有错误但导航栏不显示

import React, { Component } from "react";
import { AppRegistry, Text, View, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { NavigationComponent } from "react-native-material-bottom- 
navigation";
import { TabNavigator } from "react-navigation";

import Home from "./app/components/home.js";
import BackgroundImage from "./app/components/BackgroundImage.js";
import FadeAnimation from 
"./app/components/animations/fadeAnimation.js";

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Home",
    tabBarIcon: () => <Icon size={24} color="white" name="home" />
  };

  render() {
    return (
      <BackgroundImage>
        <Home />
      </BackgroundImage>
    );
  }
}

class Announcements extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Announcements",
    tabBarIcon: () => <Icon size={24} color="white" name="bullhorn" />
  };

  render() {
    return (
      <View>
        <Text>This is announcement page</Text>
      </View>
    );
  }
}

class Calendar extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Calendar",
    tabBarIcon: () => <Icon size={24} color="white" name="calendar" />
  };

  render() {
     return (
       <View>
         <Text>This is announcement page</Text>
      </View>
    );
  }
}

class Contact extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Contact",
    tabBarIcon: () => <Icon size={24} color="white" name="comments" />
  };

  render() {
    return (
      <View>
        <Text>This is announcement page</Text>
      </View>
    );
  }
}

const MyApp = TabNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    Announcements: { screen: Announcements },
    Calendar: { screen: Calendar },
    Contact: { screen: Contact }
  },

  {
    tabBarComponent: NavigationComponent,
    tabBarPosition: "bottom",
    tabBarOptions: {
     bottomNavigationOptions: {
        labelColor: "white",
        rippleColor: "white",
        tabs: {
          HomeScreen: {
            barBackgroundColor: "#3C2538"
          },
          Announcements: {
            barBackgroundColor: "#388E3C"
          },
          Calendar: {
                barBackgroundColor: "#E64A19",
                labelColor: "#434343",
                activeLabelColor: "#212121",
                activeIcon: <Icon size={24} color="#212121" name="calendar" />
          },
          Contact: {
            barBackgroundColor: "#a0c4ff"
          }
        }
      }
    }
  }
);
export default MyApp;
AppRegistry.registerComponent("MyApp", () => MyApp);

标签： react-nativereact-navigation

Answer 1

也许我的情况可能对您有所帮助，所以在 App.js 中创建底部选项卡导航器，只需导入createBottomTabNavigator，然后导入要放在底部选项卡导航中的一些屏幕，这是我的代码示例：

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

import Users from './Users';
import Vehicles from './Vehicles';
import Home from './Home';
import MyAccount from './MyAccount';

export default class Dashboard extends Component {
    static navigationOptions = {
        header: null,
    };
    render() {
      return (
        <AppContainer/>
      );
    }
  }

const TabScreens = createBottomTabNavigator({
    Home:{
        screen: Home
    },
    Users:{
        screen: Users,
    },
    Vehicles:{
        screen: Vehicles
    },
    MyAccount:{
        screen: MyAccount
    },
},{
    tabBarOptions:{
        labelStyle: {
            fontSize: 12,
            marginBottom:10,
        },
        style:{
            elevation:5
        }
    }
})

const AppContainer = createAppContainer(TabScreens);

希望它会帮助你