如何修复您应该只在 IOS 的应用程序中显式呈现一个导航器

Posted 2023-04-15

【中文标题】如何修复您应该只在 IOS 的应用程序中显式呈现一个导航器

【英文标题】：how to fix You should only render one navigator explicitly in your app in IOS

【发布时间】：2019-08-08 09:54:58

【问题描述】：

我在 RN 项目中使用“react-navigation”和 react-native-router-flux 在android一切正常 但是在ios有警告

您应该只在您的应用中显式渲染一个导航器，而其他 应该通过将导航器包含在该导航器中来呈现导航器。 详情请见： https://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator - node_modules/expo/build/environment/logging.js:25:23 警告 - node_modules/@react-navigation/native/src/createAppContainer.js:198:12 在组件DidMount$ - node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:62:44 在 tryCatch 中 - node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:288:30 在调用中 - node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:62:44 在 tryCatch 中 - node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:152:28 在调用中 - node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:187:17 在

这是我的 App.js

...

 return (
      <Provider store=store>
        <RouterWithRedux>
          <Router>
            <Stack key="root" hideNavBar=true>
              <Scene
                key="loginScreen"
                hideNavBar
                component=requireAuthNOT(LoginScreen)
                title="Please Sign in"
              />
              <Scene
                key="ticketsListScreen"
                component=requireAuth(TicketsListScreen)
                animation="fade"
                title="Home"
                hideNavBar=true
              />
              <Scene
                key="ticketDetail"
                component=requireAuth(LoginDetail)
                animation="fade"
                hideNavBar=true
              />
            </Stack>
          </Router>
        </RouterWithRedux>
      </Provider>
    );

...

LoginScreen.js

import React,  Component  from "react"; 
import Logo from "../components/Auth/Logo";
import Form from "../components/Auth/Form";
import Wallpaper from "../components/Auth/Wallpaper";
import ButtonSubmit from "../components/Auth/ButtonSubmit";
import SignupSection from "../components/Auth/SignupSection";

export default class LoginScreen extends Component 
  render() 
    return (
      <Wallpaper>
        <Logo />
        <Form />
        <SignupSection />
        <ButtonSubmit />
      </Wallpaper>
    );
  

TicketsListScreen.js

import React,  Component  from "react";
import Navigator from "./Navigator";

export default class ScreenTest extends Component 
  render() 
    return <Navigator />;
  

Navigator.js

import React,  Component  from "react";
import TicketsListScreen from "./TicketsListScreen";
import VehicleScreen from "../VehicleScreen/VehicleScreen";
import SideBar from "../../components/Navigator/SideBar";
import SignOut from "../../screens/LogoutScreen";
import  createDrawerNavigator, createAppContainer  from "react-navigation";
const TicketScreenRouter = createDrawerNavigator(
  
    Home:  screen: TicketsListScreen ,
    Tickets:  screen: TicketsListScreen ,
    "Vehicle Inspections":  screen: VehicleScreen ,
    "Sign Out":  screen: SignOut 
  ,
  
    contentComponent: props => <SideBar ...props />
  ,
  
    initialRouteName: "Home"
  
);
export default createAppContainer(TicketScreenRouter);

我不确定是什么问题。 我读过https://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator

但这对我没有帮助

感谢问候

【问题讨论】：

不要使用两个导航器，你可以使用router-flux的抽屉而不是react-navigation的createDrawerNavigator

我认为有一个导航器

不，你使用的是两个，一个在 App.js 中，另一个在 Navigator.js 中

谢谢，我尝试使用 router-flux 的抽屉。我已经解决了这个问题。

很高兴能帮到你:)

【参考方案1】：

这是 app.js

return (
      <Provider store=store>
        <RouterWithRedux>
          <Scene key="root" hideNavBar=true>
            <Scene
              key="loginScreen"
              hideNavBar
              component=requireAuthNOT(LoginScreen)
              title="Please Sign in"
            />
            <Drawer
              open=false
              type="overlay"
              key="drawer"
              contentComponent=SideBar>
              <Scene
                key="VehicleInsections"
                component=requireAuth(VehicleScreen)
                animation="fade"
                title="Vehicle"
                hideNavBar=true
              />                 
          </Scene>
        </RouterWithRedux>
      </Provider>
    );
  

目前这对我也很有效 再次感谢https://***.com/users/9799857/firu。