React native 反应导航+；反应导航材质底部选项卡

我正在尝试创建一个应用程序，它有一个底部导航选项卡和四屏选项卡菜单。我想有另一个管理页面，但菜单选项不应该出现在底部选项卡上。（我必须转到该页面）我正在使用创建底部选项卡栏

我需要一个方法去那一页

export default createMaterialBottomTabNavigator(

  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home",
        tabBarLabel: <Text style={{ color: "white" }}>Home</Text>,
        barStyle: { backgroundColor: "#281b39" },
        tabBarIcon: <Icon size={24} name="home" style={{ color: "white" }} />
      }
    },
    Announcement: {
      screen: AnnouncementScreen,
      navigationOptions: {
        title: "Announcement",
        tabBarLabel: <Text style={{ color: "white" }}>Announcements</Text>,
        barStyle: { backgroundColor: "#0e141d" },
        tabBarIcon: (
          <Icon size={24} name="bullhorn" style={{ color: "white" }} />
        )
      }
    },
    Material: {
      screen: MaterialScreen,
      navigationOptions: {
        title: "Materials",
        tabBarLabel: <Text style={{ color: "white" }}>Materials</Text>,
        barStyle: { backgroundColor: "#E64A19" },
        tabBarIcon: (
          <Icon size={24} name="calendar" style={{ color: "white" }} />
        )
      }
    },
    Contact: {
      screen: ContactScreen,
      navigationOptions: {
        title: "Contact",
        tabBarLabel: <Text style={{ color: "white" }}>Contact</Text>,
        barStyle: { backgroundColor: "#524365" },
        tabBarIcon: (
          <Icon size={24} name="comments" style={{ color: "white" }} />
        )
      }
    },   },

  {
    shifting: true,
    labeled: true   } );

导出默认createMaterialBottomTabNavigator(
{
主页：{
屏幕：主屏幕，
导航选项：{
标题：“家”，
tabBarLabel:Home，
barStyle:{backgroundColor:#281b39}，
塔巴瑞康：
}
},
公告:{
屏幕：公告屏幕，
导航选项：{
标题：“公告”，
tabBarLabel：公告，
barStyle:{backgroundColor:#0e141d}，
塔巴瑞康：(
)
}
},
材料：{
屏幕：材质屏幕，
导航选项：{
标题：“材料”，
标签：材料，
barStyle:{backgroundColor:#E64A19}，
塔巴瑞康：(
)
}
},
联系人：{
屏幕：ContactScreen，
导航选项：{
标题：“联系人”，
tabBarLabel:联系人，
barStyle:{backgroundColor:#524365}，
塔巴瑞康：(
)
}
},   },
{
是的，
标记为：true}）；

这是一个更新版本

import React, { Component } from "react";
import { AppRegistry, Text, View, StatusBar } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

import Home from "./app/components/home.js";
import Announcements from "./app/components/announcements.js";
import Contact from "./app/components/contact.js";

import BackgroundImage from "./app/components/BackgroundImage.js";

class HomeScreen extends Component {
  render() {
    return (
      <BackgroundImage>
        <StatusBar hidden={true} />
        <Home />
      </BackgroundImage>
    );
  }
}

class AnnouncementScreen extends Component {
  render() {
    return (
      <Announcements>
        <StatusBar hidden={true} />
      </Announcements>
    );
  }
}

class MaterialScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{ textAlign: "center", top: 200 }}>
          This is going to be the Materials Screen
        </Text>
      </View>
    );
  }
}

class ContactScreen extends Component {
  render() {
    return <Contact />;
  }
}

class AdminPage extends Component {
  render() {
    return <Text>Hi</Text>;
  }
}

const Admins = {
  Admin: {
    screen: AdminPage
  }
};

const ContactStack = createStackNavigator({
  Contact: {
    screen: ContactScreen
  },
  ...Admins
});

const AppNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home",
        tabBarLabel: <Text style={{ color: "white" }}>Home</Text>,
        barStyle: { backgroundColor: "#281b39" },
        tabBarIcon: <Icon size={24} name="home" style={{ color: "white" }} />
      }
    },
    Announcement: {
      screen: AnnouncementScreen,
      navigationOptions: {
        title: "Announcement",
        tabBarLabel: <Text style={{ color: "white" }}>Announcements</Text>,
        barStyle: { backgroundColor: "#0e141d" },
        tabBarIcon: (
          <Icon size={24} name="bullhorn" style={{ color: "white" }} />
        )
      }
    },
    Material: {
      screen: MaterialScreen,
      navigationOptions: {
        title: "Materials",
        tabBarLabel: <Text style={{ color: "white" }}>Materials</Text>,
        barStyle: { backgroundColor: "#E64A19" },
        tabBarIcon: (
          <Icon size={24} name="calendar" style={{ color: "white" }} />
        )
      }
    },
    Contact: {
      screen: ContactStack,
      navigationOptions: {
        title: "Contact",
        tabBarLabel: <Text style={{ color: "white" }}>Contact</Text>,
        barStyle: { backgroundColor: "#524365" },
        tabBarIcon: (
          <Icon size={24} name="comments" style={{ color: "white" }} />
        )
      }
    }
  },

  {
    shifting: true,
    labeled: true
  }
);

const App = createAppContainer(AppNavigator);

export default App;

import React，{Component}来自“React”；
从“react native”导入{AppRegistry，Text，View，StatusBar}；
从“react native vector icons/Fontsome”导入图标；
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“/app/components/Home.js”导入主页；
从“/app/components/Announcements.js”导入公告；
从“/app/components/Contact.js”导入联系人；
从“/app/components/BackgroundImage.js”导入BackgroundImage；
类主屏幕扩展组件{
render（）{
返回(
);
}
}
类公告屏幕扩展组件{
render（）{
返回(
);
}
}
类MaterialScreen扩展组件{
render（）{
返回(
这将是材料屏幕
);
}
}
类ContactScreen扩展组件{
render（）{
返回；
}
}
类AdminPage扩展组件{
render（）{
返回Hi；
}
}
常量管理员={
管理员：{
屏幕：AdminPage
}
};
const ContactStack=createStackNavigator({
联系人：{
屏幕：ContactScreen
},
…管理员
});
const AppNavigator=createMaterialBottomTabNavigator(
{
主页：{
屏幕：主屏幕，
导航选项：{
标题：“家”，
tabBarLabel:Home，
barStyle:{backgroundColor:#281b39}，
塔巴瑞康：
}
},
公告:{
屏幕：公告屏幕，
导航选项：{
标题：“公告”，
tabBarLabel：公告，
barStyle:{backgroundColor:#0e141d}，
塔巴瑞康：(
)
}
},
材料：{
屏幕：材质屏幕，
导航选项：{
标题：“材料”，
标签：材料，
barStyle:{backgroundColor:#E64A19}，
塔巴瑞康：(
)
}
},
联系人：{
屏幕：ContactStack，
导航选项：{
标题：“联系人”，
tabBarLabel:联系人，
barStyle:{backgroundColor:#524365}，
塔巴瑞康：(
)
}
}
},
{
是的，
标签：正确
}
);
const App=createAppContainer（AppNavigator）；
导出默认应用程序；

您可以使用

StackNavigator

进入新屏幕

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

class Home extends React.Component {
  render() {
    const { navigation } = this.props;

    return (
      <View style={styles.container}>
        <Text onPress={() => navigation.navigate("Admin")}>Home</Text>
      </View>
    );
  }
}

class Announcement extends React.Component {
  render() {
    const { navigation } = this.props;

    return (
      <View style={styles.container}>
        <Text onPress={() => navigation.navigate("Admin")}>Announcement</Text>
      </View>
    );
  }
}

class Material extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Material</Text>
      </View>
    );
  }
}

class Contact extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Contact</Text>
      </View>
    );
  }
}

class Admin extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Admin</Text>
      </View>
    );
  }
}

const commonScreens = {
  Admin: {
    screen: Admin
  }
};

const HomeStack = createStackNavigator({
  Home: {
    screen: Home
  },
  ...commonScreens
});

const AnnouncementStack = createStackNavigator({
  Announcement: {
    screen: Announcement
  },
  ...commonScreens
});

const AppNavigator = createMaterialBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Announcement: { screen: AnnouncementStack },
    Material: { screen: Material },
    Contact: { screen: Contact }
  },
  {
    initialRouteName: "Home",
    activeColor: "#f0edf6",
    barStyle: { backgroundColor: "#694fad" },
    labeled: true
  }
);

export default createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
类Home扩展了React.Component{
render（）{
const{navigation}=this.props；
返回(
导航。导航（“管理”）}>Home
);
}
}
类声明扩展了React.Component{
render（）{
const{navigation}=this.props；
返回(
navigation.navigate（“Admin”）}>公告
);
}
}
类材质扩展了React.Component{
render（）{
返回(
材料
);
}
}
类Contact扩展了React.Component{
render（）{
返回(
接触
);
}
}
类Admin扩展了React.Component{
render（）{
返回(
管理
);
}
}
const commonScreens={
管理员：{
屏幕：管理员
}
};
const HomeStack=createStackNavigator({
主页：{
屏幕：主页
},
…公理
});
const AnnouncementStack=createStackNavigator({
公告:{
屏幕：公告
},
…公理
});
const AppNavigator=createMaterialBottomTabNavigator(
{
主页：{screen:HomeStack}，
公告：{screen:AnnouncementStack}，
材质：{屏幕：材质}，
联系人：{屏幕：联系人}
},
{
初始路由名称：“主页”，
activeColor:#f0edf6“，
barStyle:{backgroundColor:#694fad}，
标签：正确
}
);
导出默认createAppContainer（AppNavigator）；
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
});

也有删除标题的选项。

---

有关更多信息，请查看文档

什么是菜单选项？当我按下按钮而不是单击屏幕时，是否有办法将其更改为管理页面？我一直得到一个

（0，-reactNavigation.createAppContainer）不是功能