javascript - react 堆栈导航

Question

我正在尝试为我的 react native 应用程序创建一个底部导航器。对于某些页面，我尝试在单击按钮时创建嵌套页面。但我正在尝试使用 react 导航。我被这个问题困扰了一个多月了，我正试图在毕业之前启动我的学校应用程序。

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

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";
import Materials from "./app/components/Materials.js";

class HomeScreen extends Component {
  componentDidMount() {
    SplashScreen.hide();
  }
  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 <Materials />;
  }
}

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

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

const Stack = {
  Admin: {
    screen: StackPage
  }
};

const HomeStack = createStackNavigator({
  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" }} />
    }
  },
  ...Stack
});

const AppNavigator = createMaterialBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    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: "#0D4D4B" },
        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
  },
);

export default createAppContainer(AppNavigator);

但遇到以下错误。

Error: This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "rootTag" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.

Answer 1

import React from "react";
import { Image } from "react-native-elements";
import stringsoflanguages from "../containers/stringsoflanguages";
import {
  createBottomTabNavigator,
  createSwitchNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import LoginScreen from "../containers/LoginScreen";
import AuthLoadingScreen from "../containers/AuthLoadingScreen";
import RequestCategory from "../containers/RequestCategory";
import PendingCategory from "../containers/PendingCategory";
import OtherCategory from "../containers/OtherCategory";
import Addresscategory from "../containers/Addresscategory";
import AddressList from "../containers/AddressList";
import AllAttendance from "../containers/AllAttendance";
import AllDocument from "../containers/AllDocument";
import AllMeeting from "../containers/AllMeeting";
import AllOutMeeting from "../containers/AllOutMeeting";
import Assessment from "../containers/Assessment";
import BasicInformation from "../containers/BasicInformation";
import CategoryList from "../containers/CategoryList";
import Complaint from "../containers/Complaint";
import DailyWork from "../containers/DailyWork";
import Education from "../containers/Education";
import EmailList from "../containers/EmailList";
import MessageCenter from "../containers/MessageCenter";
import FinanceExpense from "../containers/FinanceExpense";
import FundExpense from "../containers/FundExpense";
import FundIncome from "../containers/FundIncome";
import FundMaintaince from "../containers/FundMaintaince";
import Home from "../containers/Home";
import LibraryExpense from "../containers/LibraryExpense";
import LibraryIncome from "../containers/LibraryIncome";
import MeetingApply from "../containers/MeetingApply";
import MeetingRoom from "../containers/MeetingRoom";
import MyAttendance from "../containers/MyAttendance";
import MyDocument from "../containers/MyDocument";
import MyOuting from "../containers/MyOuting";
import ProfileAddress from "../containers/ProfileAddress";
import RecyclerDocument from "../containers/RecyclerDocument";
import Repair from "../containers/Repair";
import ResearchData from "../containers/ResearchData";
import Reward from "../containers/Reward";
import SearchProject from "../containers/SearchProject";
import Training from "../containers/Training";
import User from "../containers/User";
import WorkExperience from "../containers/WorkExperience";
import PersonalInformationcategory from "../containers/PersonalInformationcategory";
import DailyWorkcategory from "../containers/DailyWorkcategory";
import MeetingRoomcategory from "../containers/MeetingRoomcategory";
import Conferencemanagmnetcategory from "../containers/Conferencemanagementcategory";
import OutingMeetingcategory from "../containers/OutingMeetingcategory";
import Financialrevenuecategory from "../containers/Financialrevenuecategory";
import Libraryrevenuecategory from "../containers/Libraryrevenuecategory";
import Escrowrevenuecategory from "../containers/Escrowrevenuecategory";
import BookAssets from "../containers/BookAssets";
import EquipmentAssets from "../containers/EquipmentAssets";
import UserProfile from "../containers/UserProfile";
import PersonalAssets from "../containers/PersonalAssets";
import MessageChat from "../containers/MessgeChat";
import BasicInformationDetails from "../containers/BasicInformationDetails";
import EducationDetails from "../containers/EducationDetails";
import TrainingDetails from "../containers/TrainingDetails";
import RewardDetails from "../containers/RewardDetails";
import AssessmentDetails from "../containers/AssessmentDetails";
import ResearchresultDetails from "../containers/ResearchresultDetails";
import ResearchprojectDetails from "../containers/ResearchprojectDetails";
import Backlog from "../containers/Backlog";
import ProfileEquipment from "../containers/ProfileEquipment";
import ProfileDocument from "../containers/ProfileDocument";
import Addressgroupinfo from "../containers/Addressgroupinfo";
import AddressUser from "../containers/AddressUser";
import BookAssetsList from "../containers/BookAssetsList";
import BookAssetsDetails from "../containers/BookAssetDetails";
import EquipmentDetails from "../containers/EquipmentDetails";
import PersonalAssetsDetails from "../containers/PersonalAssetsDetails";
import WorkExperienceDetails from "../containers/WorkExperienceDetails";
import AllMeetingDetails from "../containers/AllMeetingDetails";
import MeetingApplyDetails from "../containers/MeetingApplyDetails";
import FinancialExpenseDetails from "../containers/FinancialExpenseDetails";
import MaintainceFundDetails from "../containers/MaintainceFundDetails";
import LibraryExpenseDetails from "../containers/LibraryExpenseDetails";
import LibraryIncomeDetails from "../containers/LibraryIncomeDetails";
import FundIncomeDetails from "../containers/FundIncomeDetails";
import FundExpenseDetails from "../containers/FundExpenseDetails";
import CallForDetails from "../containers/CallForDetails";
import ComplaintDetails from "../containers/ComplaintDetails";
import BookAssetsEdit from "../containers/BookAssetsEdit";
import EquipmentEdit from "../containers/EquipmentEdit";
import PersonalAssetsEdit from "../containers/PersonalAssetsEdit";
import BookDetails from "../containers/BookDetails";
import DialogPage from "../containers/DialogPage";
import Example from "../containers/Example";
import AllApprovalDetails from "../containers/AllApprovalDetails";
import PendingApprovalDetails from "../containers/PendingApprovalDetails";
import OtherApprovalDetails from "../containers/OtherApprovalDetails";
import RequestApprovalDetails from "../containers/RequestApprovalDetails";
import ProfileEquipmentDetails from "../containers/ProfileEquipmentDetails";
import DocumentUpload from "../containers/DocumentUpload";
import ContactDetails from "../containers/ContactDetails";
import BookDetailsAdd from "../containers/BookDetailsAdd";
import PersonalAssetsAdd from "../containers/PersonalAssetsAdd";
import EquipmentAdd from "../containers/EquipmentAdd";
import BookListAdd from "../containers/BookListAdd";
import MeetingRoomDetails from "../containers/MeetingRoomDetails";
import SubmitMeeting from "../containers/SubmitMeeting";

const TabNavigator = createBottomTabNavigator(
  {
    EmailList: {
      screen: createStackNavigator({
        EmailList: {
          screen: EmailList,
          navigationOptions: {
            header: null
          }
        },

        MessageChat: {
          screen: MessageChat,
          navigationOptions: {
            header: null
          }
        },

        DocumentUpload: {
          screen: DocumentUpload,
          navigationOptions: {
            header: null
          }
        }
      }),
      navigationOptions: {
        tabBarLabel: stringsoflanguages.chats,
        tabBarIcon: ({ tintColor }) => (
          <Image
            style={{ tintColor, width: 22, height: 18 }}
            source={require("../assets/common_slicing/ic_chat.png")}
          />
        )
      }
    },
    Home: {
      screen: createStackNavigator({
        Home: {
          screen: Home,
          navigationOptions: {
            header: null
          }
        },

        SubmitMeeting: {
          screen: SubmitMeeting,
          navigationOptions: {
            header: null
          }
        },

        RequestApprovalDetails: {
          screen: RequestApprovalDetails,
          navigationOptions: {
            header: null
          }
        },

        PersonalAssetsAdd: {
          screen: PersonalAssetsAdd,
          navigationOptions: {
            header: null
          }
        },

        EquipmentAdd: {
          screen: EquipmentAdd,
          navigationOptions: {
            header: null
          }
        },

        BookListAdd: {
          screen: BookListAdd,
          navigationOptions: {
            header: null
          }
        },

        OtherApprovalDetails: {
          screen: OtherApprovalDetails,
          navigationOptions: {
            header: null
          }
        },

        PendingApprovalDetails: {
          screen: PendingApprovalDetails,
          navigationOptions: {
            header: null
          }
        },
        MeetingRoomcategory: {
          screen: MeetingRoomcategory,
          navigationOptions: {
            header: null
          }
        },

        Example: {
          screen: Example,
          navigationOptions: {
            header: null
          }
        },

        DialogPage: {
          screen: DialogPage,
          navigationOptions: {
            header: null
          }
        },

        Escrowrevenuecategory: {
          screen: Escrowrevenuecategory,
          navigationOptions: {
            header: null
          }
        },

        BookDetails: {
          screen: BookDetails,
          navigationOptions: {
            header: null
          }
        },

        ComplaintDetails: {
          screen: ComplaintDetails,
          navigationOptions: {
            header: null
          }
        },

        FinancialExpenseDetails: {
          screen: FinancialExpenseDetails,
          navigationOptions: {
            header: null
          }
        },

        MaintainceFundDetails: {
          screen: MaintainceFundDetails,
          navigationOptions: {
            header: null
          }
        },

        AllApprovalDetails: {
          screen: AllApprovalDetails,
          navigationOptions: {
            header: null
          }
        },

        LibraryExpenseDetails: {
          screen: LibraryExpenseDetails,
          navigationOptions: {
            header: null
          }
        },

        LibraryIncomeDetails: {
          screen: LibraryIncomeDetails,
          navigationOptions: {
            header: null
          }
        },

        FundIncomeDetails: {
          screen: FundIncomeDetails,
          navigationOptions: {
            header: null
          }
        },

        CallForDetails: {
          screen: CallForDetails,
          navigationOptions: {
            header: null
          }
        },

        FundExpenseDetails: {
          screen: FundExpenseDetails,
          navigationOptions: {
            header: null
          }
        },
        Financialrevenuecategory: {
          screen: Financialrevenuecategory,
          navigationOptions: {
            header: null
          }
        },

        PersonalAssetsEdit: {
          screen: PersonalAssetsEdit,
          navigationOptions: {
            header: null
          }
        },

        EquipmentEdit: {
          screen: EquipmentEdit,
          navigationOptions: {
            header: null
          }
        },

        Libraryrevenuecategory: {
          screen: Libraryrevenuecategory,
          navigationOptions: {
            header: null
          }
        },
        OutingMeetingcategory: {
          screen: OutingMeetingcategory,
          navigationOptions: {
            header: null
          }
        },
        Conferencemanagmnetcategory: {
          screen: Conferencemanagmnetcategory,
          navigationOptions: {
            header: null
          }
        },
        LibraryExpense: {
          screen: LibraryExpense,
          navigationOptions: {
            header: null
          }
        },
        Training: {
          screen: Training,
          navigationOptions: {
            header: null
          }
        },
        RecyclerDocument: {
          screen: RecyclerDocument,
          navigationOptions: {
            header: null
          }
        },
        MeetingApply: {
          screen: MeetingApply,
          navigationOptions: {
            header: null
          }
        },

        MeetingApplyDetails: {
          screen: MeetingApplyDetails,
          navigationOptions: {
            header: null
          }
        },

        MeetingRoomDetails: {
          screen: MeetingRoomDetails,
          navigationOptions: {
            header: null
          }
        },
        DailyWorkcategory: {
          screen: DailyWorkcategory,
          navigationOptions: {
            header: null
          }
        },
        MyOuting: {
          screen: MyOuting,
          navigationOptions: {
            header: null
          }
        },
        MyDocument: {
          screen: MyDocument,
          navigationOptions: {
            header: null
          }
        },
        MyAttendance: {
          screen: MyAttendance,
          navigationOptions: {
            header: null
          }
        },
        MeetingRoom: {
          screen: MeetingRoom,
          navigationOptions: {
            header: null
          }
        },
        LibraryIncome: {
          screen: LibraryIncome,
          navigationOptions: {
            header: null
          }
        },
        BasicInformation: {
          screen: BasicInformation,
          navigationOptions: {
            header: null
          }
        },

        BasicInformationDetails: {
          screen: BasicInformationDetails,
          navigationOptions: {
            header: null
          }
        },

        WorkExperienceDetails: {
          screen: WorkExperienceDetails,
          navigationOptions: {
            header: null
          }
        },

        TrainingDetails: {
          screen: TrainingDetails,
          navigationOptions: {
            header: null
          }
        },

        EducationDetails: {
          screen: EducationDetails,
          navigationOptions: {
            header: null
          }
        },

        RewardDetails: {
          screen: RewardDetails,
          navigationOptions: {
            header: null
          }
        },

        AssessmentDetails: {
          screen: AssessmentDetails,
          navigationOptions: {
            header: null
          }
        },

        ResearchresultDetails: {
          screen: ResearchresultDetails,
          navigationOptions: {
            header: null
          }
        },

        ResearchprojectDetails: {
          screen: ResearchprojectDetails,
          navigationOptions: {
            header: null
          }
        },

        FundMaintaince: {
          screen: FundMaintaince,
          navigationOptions: {
            header: null
          }
        },
        Education: {
          screen: Education,
          navigationOptions: {
            header: null
          }
        },
        DailyWork: {
          screen: DailyWork,
          navigationOptions: {
            header: null
          }
        },
        FundExpense: {
          screen: FundExpense,
          navigationOptions: {
            header: null
          }
        },
        FundIncome: {
          screen: FundIncome,
          navigationOptions: {
            header: null
          }
        },
        FinanceExpense: {
          screen: FinanceExpense,
          navigationOptions: {
            header: null
          }
        },
        AllAttendance: {
          screen: AllAttendance,
          navigationOptions: {
            header: null
          }
        },
        AllDocument: {
          screen: AllDocument,
          navigationOptions: {
            header: null
          }
        },
        AllMeeting: {
          screen: AllMeeting,
          navigationOptions: {
            header: null
          }
        },

        AllMeetingDetails: {
          screen: AllMeetingDetails,
          navigationOptions: {
            header: null
          }
        },

        AllOutMeeting: {
          screen: AllOutMeeting,
          navigationOptions: {
            header: null
          }
        },
        Assessment: {
          screen: Assessment,
          navigationOptions: {
            header: null
          }
        },
        Addresscategory: {
          screen: Addresscategory,
          navigationOptions: {
            header: null
          }
        },
        WorkExperience: {
          screen: WorkExperience,
          navigationOptions: {
            header: null
          }
        },
        RequestCategory: {
          screen: RequestCategory,
          navigationOptions: {
            header: null
          }
        },
        PendingCategory: {
          screen: PendingCategory,
          navigationOptions: {
            header: null
          }
        },
        OtherCategory: {
          screen: OtherCategory,
          navigationOptions: {
            header: null
          }
        },
        Repair: {
          screen: Repair,
          navigationOptions: {
            header: null
          }
        },
        Reward: {
          screen: Reward,
          navigationOptions: {
            header: null
          }
        },
        SearchProject: {
          screen: SearchProject,
          navigationOptions: {
            header: null
          }
        },
        ResearchData: {
          screen: ResearchData,
          navigationOptions: {
            header: null
          }
        },
        Complaint: {
          screen: Complaint,
          navigationOptions: {
            header: null
          }
        },
        BookAssets: {
          screen: BookAssets,
          navigationOptions: {
            header: null
          }
        },
        BookAssetsList: {
          screen: BookAssetsList,
          navigationOptions: {
            header: null
          }
        },

        BookAssetsEdit: {
          screen: BookAssetsEdit,
          navigationOptions: {
            header: null
          }
        },

        BookAssetsDetails: {
          screen: BookAssetsDetails,
          navigationOptions: {
            header: null
          }
        },
        EquipmentAssets: {
          screen: EquipmentAssets,
          navigationOptions: {
            header: null
          }
        },

        EquipmentDetails: {
          screen: EquipmentDetails,
          navigationOptions: {
            header: null
          }
        },

        PersonalAssets: {
          screen: PersonalAssets,
          navigationOptions: {
            header: null
          }
        },

        PersonalAssetsDetails: {
          screen: PersonalAssetsDetails,
          navigationOptions: {
            header: null
          }
        },

        PersonalInformationcategory: {
          screen: PersonalInformationcategory,
          navigationOptions: {
            header: null
          }
        },
        BookDetailsAdd: {
          screen: BookDetailsAdd,
          navigationOptions: {
            header: null
          }
        }
      }),
      navigationOptions: {
        tabBarLabel: stringsoflanguages.Home,
        tabBarIcon: ({ tintColor }) => (
          <Image
            style={{ tintColor, width: 22, height: 18 }}
            source={require("../assets/common_slicing/ic_home.png")}
          />
        )
      }
    },

    MessageCenter: {
      screen: MessageCenter,
      navigationOptions: {
        title: "",
        tabBarIcon: (
          <Image
            style={{ top: 10, width: 55, height: 60 }}
            source={require("../assets/common_slicing/add_btn.png")}
          />
        )
      }
    },

    Address: {
      screen: createStackNavigator({
        CategoryList: {
          screen: CategoryList,
          navigationOptions: {
            header: null
          }
        },
        ContactDetails: {
          screen: ContactDetails,
          navigationOptions: {
            header: null
          }
        },
        // AddressSearchPage : {
        //   screen : AddressSearchPage,
        //   navigationOptions : {
        //     header : null
        //   }
        // },
        AddressList: {
          screen: AddressList,
          navigationOptions: {
            header: null
          }
        },
        ProfileAddress: {
          screen: ProfileAddress,
          navigationOptions: {
            header: null
          }
        },
        Addressgroupinfo: {
          screen: Addressgroupinfo,
          navigationOptions: {
            header: null
          }
        },

        AddressUser: {
          screen: AddressUser,
          navigationOptions: {
            header: null
          }
        }
      }),
      navigationOptions: {
        tabBarLabel: stringsoflanguages.AddressBook,
        tabBarIcon: ({ tintColor }) => (
          <Image
            style={{ tintColor, width: 22, height: 18 }}
            source={require("../assets/common_slicing/ic_address_book.png")}
          />
        )
      }
    },
    User: {
      screen: createStackNavigator({
        User: {
          screen: User,
          navigationOptions: {
            header: null
          }
        },
        UserProfile: {
          screen: UserProfile,
          navigationOptions: {
            header: null
          }
        },

        ProfileEquipmentDetails: {
          screen: ProfileEquipmentDetails,
          navigationOptions: {
            header: null
          }
        },
        Backlog: {
          screen: Backlog,
          navigationOptions: {
            header: null
          }
        },
        ProfileDocument: {
          screen: ProfileDocument,
          navigationOptions: {
            header: null
          }
        },
        ProfileEquipment: {
          screen: ProfileEquipment,
          navigationOptions: {
            header: null
          }
        }
      }),
      navigationOptions: {
        tabBarLabel: stringsoflanguages.profilepage,
        tabBarIcon: ({ tintColor }) => (
          <Image
            style={{ tintColor, width: 22, height: 22 }}
            source={require("../assets/common_slicing/ic_profile.png")}
          />
        )
      }
    }
  },
  {
    swipeEnabled: true,
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray",
      labelStyle: {
        fontFamily: "Raleway-Regular",
        textAlign: "center",
        bottom: 10,
        fontSize: 9
      },
      style: {
        height: 70
      }
    }
  }
);

const AuthStack = createStackNavigator({
  Login: LoginScreen
});

const appRoutes = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: TabNavigator,
    Auth: AuthStack
  },
  {
    initialRouteName: "AuthLoading"
  }
);

export const Router = createAppContainer(appRoutes);

export default Router;