反应导航 - 无法读取未定义的属性 'navigate'

Question

我是 React Native 的新手，正在尝试创建我的第一个应用程序。所以我有一个问题：

我有 2 个屏幕（使用反应导航）。在第一个屏幕上，有一个带有微调器的应用程序徽标渲染（来自本机基础）并同时获取到服务器。而且我只需要在获取结束并处理响应时导航到另一个屏幕。请帮我找出错误！

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,TouchableHighlight
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoadingScreen from './src/screens/LoadingScreen.js';
import MainContainer from './src/screens/MainContainer.js';

export default class Calculator2 extends Component {
  render() {
    return (
      <LoadingScreen/>
    );
  }
}
const AppNavigator = StackNavigator({
  Loading: {
    screen: LoadingScreen
   },
  Main: {
    screen: MainContainer
  }
});

AppRegistry.registerComponent('Calculator2', () => Calculator2);

LoadingScreen.js:

import React, { Component } from 'react';
import {
  AsyncStorage,
  AppRegistry,NetInfo,
  Text,Image,View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import AppNavigator from '../../index.ios.js';
import { Container, Header, Content, Spinner } from 'native-base';

export default class LoadingScreen extends Component {
  static navigationOptions = {
    title: 'Loading',
  };
  constructor(props){
   super(props);

  }
  componentDidMount(){
    const {navigate} = this.props.navigation;
    fetch('url').then( (response) => {navigate('Main')});
  }
  render() {
    return(
          <View>
            App logo with spinner
          </View>
   );
  }
}

MainContainer.js

import React, { Component } from 'react';
import {
  AppRegistry,Alert,NetInfo,
  StyleSheet,
  Text,
  View,ActivityIndicator,
  TextInput,TouchableHighlight
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import AppNavigator from '../../index.ios.js';

export default class MainContainer extends Component {
  static navigationOptions = {
    title: 'Main',
  };

  render() {
    return (
      <View  style={{flexDirection: 'column'}}>
         ...
      </View>
    );
  }
}

我得到的只是一个错误 "Cannot read property 'navigate' of undefined" 在 LoadingScreen.componentDidMount

更新实际上我的 fetch 应该是一个获取响应并处理它的函数，它应该等到处理完成：

async function getData(){
    var response = await fetch('url', {
      method: 'GET'
    });
    storage = await response.json(); // storage for response
    regions = Object.keys(storage); // an array of regions names
    console.log(storage, Object.keys(storage));
  };

Answer 1

只需更新 LoadingScreen.js 的 componentDidMount 函数如下：

componentDidMount() {
 var self = this;
   fetch('url').then( (response) => {
        self.props.navigation.navigate('Main')
   });
}

Answer 2

您需要注册 AppNavigator 组件而不是 Calculator2

AppRegistry.registerComponent('Calculator2', () => AppNavigator);

反应导航 - 无法读取未定义的 属性 'navigate'

react-navigation - Cannot read property 'navigate' of undefined

react-navigation

反应导航 - 无法读取未定义的属性 'navigate'