Question

我正在尝试使用react-navigation创建一个SwitchNavigator。我是通过创建一个函数来完成此操作的，该函数负责更改是否通过用户身份验证的路由

import { createSwitchNavigator } from "react-navigation"

import PrivateNavigator from "./private"
import PublicNavigator from "./public"

const Navigator = (signedIn = false) => {
  return createSwitchNavigator(
    {
      Private: {
        screen: PrivateNavigator,
      },
      Public: {
        screen: PublicNavigator,
      },
    },
    {
      initialRouteName: signedIn ? "Private" : "Public",
    },
  )
}

export default Navigator

现在关于这个问题，在身份验证之后，我将导航更改为“私人”，屏幕将陷入无限循环

这是我的私人路线

import React from "react"
import { createBottomTabNavigator } from "react-navigation"

import HomeScreen from "../screens/Home"

import FooterNavigation from "../components/FooterNavigation"

const privateNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: "Home",
    tabBarComponent: props => <FooterNavigation {...props} />,
  },
)

export default privateNavigator

如果仅渲染主屏幕，则可以正常工作

import React, { Component } from "react"
import { Content, Container, Spinner } from "native-base"
import { fetchCategories } from "../../redux/actions"
import { connect } from "react-redux"

import CategoriesList from "./components/CategoriesList"

class Home extends Component<any, any> {
  componentDidMount() {
    this.props.fetchCategories()
  }

  render() {
    const { categories, isFetching, navigation } = this.props
    return (
      <Container>
        <Content padder>
          {isFetching ? (
            <Spinner />
          ) : (
            <CategoriesList categories={categories.data} navigation={navigation} />
          )}
        </Content>
      </Container>
    )
  }
}

const mapStateToProps = state => {
  return {
    ...state,
  }
}

export default connect(
  mapStateToProps,
  { fetchCategories },
)(Home)

还有AppContainer，我称之为导航

import React from "react"
import { connect } from "react-redux"
import Navigator from "../navigation"

class AppContainer extends React.Component<any, any> {
  render() {
    const { isLogged } = this.props.auth
    console.log(isLogged)

    const Layout = Navigator(isLogged)
    return <Layout />
  }
}

const mapStateToProps = state => {
  return {
    ...state,
  }
}

export default connect(
  mapStateToProps,
  {},
)(AppContainer)

我并没有改变很多状态，那为什么会发生这种情况？

谢谢：）

React Native：超过最大更新深度

0 个答案: