React-навигация импортирована, но не определена - PullRequest
Новая
       27

React-навигация импортирована, но не определена

1 голос
/ 26 марта 2019

Мое приложение «Реактив-родной» использует «Реакция-редукция» и «Реакция-навигация».

App.js импортирует Main компонент.Внутри Main реагирует на навигацию и определены все навигаторы.Тем не менее, я все еще получаю TypeError: undefined не является объектом (оценивая 'that.navigation.navigate')] на that.navigation.navigate('Auth') в Main.

Я также пытался navigation.navigate('Auth'), но получил Не могу найти переменную: navigation .Это плохая практика, чтобы импортировать реагирующую навигацию и использовать ее в одном файле?Я бы хотел использовать навигацию в Main, чтобы не вызывать firebase.auth().onAuthStateChanged на каждом экране.

App.js 

...

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

export default App;

Main.js 

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

...

const MainStack = createSwitchNavigator(
  {
    Home: HomeStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

class Main extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    var that = this;
    firebase.auth().onAuthStateChanged(async function(user) {
        if (user) {
            await that.props.getUserProfile(user.uid);
        } else {
            that.navigation.navigate('Auth');
        }
    })
  }

  render() {
    return (
      <AppContainer />
    );
  }
}

const mapStateToProps = state => {
  return {
      user: state.auth.user
  }
}

export default connect(mapStateToProps, {getUserProfile})(Main);

Ответы [ 2 ]

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

Ты за реквизит.

Изменить that.navigation.navigate('Auth'); до that.props.navigation.navigate('Auth');

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

Я не уверен, потому что я никогда не использовал реагирующую навигацию Но похоже, что только AppContainer и его дочерние элементы обернуты, а не главный компонент, поэтому навигация здесь не определена. Вы должны переосмыслить порядок компонентов вашей архитектуры

Форма https://facebook.github.io/react-native/docs/navigation

Каждый компонент экрана может устанавливать параметры навигации, такие как заголовок заголовка. Он может использовать создателей действий на navigation опоре для ссылки на другие экраны

Ваш Main Компонент не является экраном, в нем нельзя использовать навигацию.

Вы можете сделать что-то подобное: 

const AppContainer = isAuthentified => createAppContainer(createStackNavigator(
 {
  Home: HomeStack,
  Auth: AuthStack
 },
 {initialRouteName: !!isAuthentified ? 'Home' : 'Auth'}
)); 


class Main extends React.Component {
  constructor(props) {
   super(props);
   state = {loading: false};
  }

  componentDidMount = () => {
   let tmpuser = false; 
   firebase.auth().onAuthStateChanged(async function(user) {
    if (user) {
        tmpuser = await that.props.getUserProfile(user.uid);
    }});
   this.setState({user: tmpuser, loading: false})
  }

  render() {
   if (!this.state.loading) 
    return (
     <div>{AppContainer(this.state.user)}</div>
    );
   else return (<div>loading</div>);
  }
}

// Может быть не идеальным, сделано на смартфоне

...