未定義のプロパティ 'navigate'を読み取ることができません - ネイティブナビゲーションに反応します

Question

私は現在、反応ネイティブで動作するアプリケーションを開発中です。反応ナビゲーション作業thisチュートリアルで作業していますが、私のプロジェクトを実行するポイントは、私は多くの研究を行っていると私はちょうど私が反応ネイティブcli：2.0.1と反応ネイティブ：0.48.3を使用して、これは私のコードです：

App.js：

import React, { Component } from 'react'; 
import { Text, Button, View } from 'react-native'; 
import { 
    StackNavigator, 
} from 'react-navigation'; 

class App extends Component { 
    static navigationOptions = { 
     title: 'Welcome', 
    }; 

    render() { 
     console.log(this.props.navigation); 
     const { navigate } = this.props.navigation; 
     return (
      <View> 
       <Text>Go to maps!</Text> 
       <Button 
        onPress={() => navigate('Map')} 
        title="MAP" 
       /> 
      </View> 
     ); 
    } 
} 

export default App; 

私ROU

私は本当にだろう：あなたは、これは私はちょうどカントは仕事を作るこれはかなり基本的なアプリです見ることができるように、これはシミュレータ上で私のエラーのスクリーンショットです

import { 
    StackNavigator, 
    } from 'react-navigation'; 

    import MapMarker from './MapMarker'; 
    import App from './App'; 

    export const UserStack = StackNavigator({ 
    ScreenMap: 
    { 
     screen: MapMarker, 
     navigationOptions: 
     { 
      title: "Map", 
      header:null 
     }, 
    }, 
    ScreenHome: 
    { 
     screen: App, 
     navigationOptions: 
     { 
      title: "Home", 
      headerLeft:null 
     }, 
    }, 
}); 

ter.js本当にありがとうございました。おかげさまで

Answer 1

onPress = {（）}> navigate（ 'Map'）}をonPress = {（）=> navigate（ 'ScreenMap'）}に変更し、 "ScreenHome"を最初のスクリーンにし、 "ScreenMap "App"から "MapMarker"にナビゲートしたいと思っています。または、stackNavigatorでinitialRouteName： "ScreenHome"を設定することもできます。

Answer 2

あなたはStackNavigatorを作成しますが、どこで使用しますか？

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    View 
} from 'react-native'; 

    import { 
     StackNavigator, 
     } from 'react-navigation'; 

    export default class MyApp extends Component { 
     render() { 
     return (
      <View style={{flex:1}}> 
      <StackNavigator/> 
      </View> 
     ); 
     } 
    } 

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

StackNavigatorが表示されているものを制御しているので、Appコンポーネントはその小道具にナビゲーションを持ちます。ナビゲーション・プロップを「渡す」ことはできません。これはあなたのために処理されます。