反応ナビゲーション - 未定義の '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> 
    ); 
    } 
} 

そして、私が得たすべてをナビゲート「プロパティを読み取ることができませんエラー」であります「未定義」のLoadingScreen.componentDidMount

UPD 実際に私の関数はresponceを取得し、それを処理する必要がありますフェッチ、それは取り扱いが行われるまで待つ必要があり、次のよう

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

あなたは、私が「可能性のある未処理のRNデバッガに入った後、

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

Answer 2

をちょうどあなたのLoadingScreen.jsのcomponentDidMount機能を更新：

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