Как получить доступ к навигационной информации в компоненте createStackNavigator в реактивной системе - PullRequest
Новая
       6

Как получить доступ к навигационной информации в компоненте createStackNavigator в реактивной системе

0 голосов
/ 09 марта 2020

У меня есть компонент экрана подписи, который я хочу показать по умолчанию, когда пользователь не вошел в систему. А после входа я хочу перенаправить на домашнюю страницу. Ниже приведена настройка createStackNavigator: 

const MainStack = createStackNavigator(
  {
    Home: { screen: TabStack },
    User: { screen: UserProfile },
    Login: {screen: SignIn },// Want to access navigation prop in this component
    Post: { screen: Post },
  },
  {
    initialRouteName: 'Login',
    mode: 'modal',
    headerMode: 'none'
  }
)

Я использую Graphql и Reaction-Apollo в главном компоненте App.tsx 

class App extends React.Component<any,any> {
render() {

    return (<ApolloProvider client={client}>       
       <RootWithSession/>
    </ApolloProvider>)
  }
}

Я хочу получить доступ получить доступ к опоре навигации в SignIn компоненте, как это сделать?

Ответы [ 2 ]

0 голосов
/ 26 марта 2020

Мне удалось получить доступ к объекту навигации, создав два отдельных стека навигации. Один для зарегистрированных маршрутов, а другой для входа в систему, как показано ниже: 

const MainStack = createStackNavigator(
  {
    Home: { screen: TabStack },
    User: { screen: UserProfile },
    Comments: { screen: Comments },
    Post: { screen: Post }
  },
  {
    initialRouteName: 'Home',
    mode: 'modal',
    headerMode: 'none'
  }
)

const LoginStack = createStackNavigator(
  {
    Auth: { screen: SignIn }
  },
  {
    initialRouteName: 'Auth',
    mode: 'modal',
    headerMode: 'none'
  }
)

const AppContainer = createAppContainer(MainStack);
const LoginContainer = createAppContainer(LoginStack);

И в методе рендеринга я использовал screenProps для обеспечения навигационной поддержки: 

render() {
    console.log(this.state.userId)
    return (this.state.isLoggedIn?(<ApolloProvider client={client}>
      <AppContainer screenProps={{client,onLogout:this.onLogOut,loginId:this.state.userId}}/>
    </ApolloProvider>)
    :(
      <ApolloProvider client={client}>
        <LoginContainer screenProps={{client,onLogin:this.onLogin,loginId:this.state.userId}} />
      </ApolloProvider>
    ))
  }
0 голосов
/ 10 марта 2020

Краткий ответ, вы не можете получить доступ к навигационной информации в createStackNavigator. Есть 2 способа:

  1. Вы можете перейти на реагировать-навигация-v5 , так как API намного лучше, и вы получите доступ к реквизиту или состоянию при построении навигатора.

  2. Добавьте логи c внутри SignIn компонента, чтобы перейти к HomePage или к чему-то

...