は、変数を見つけることができません：反応-ナビゲーション

Question

を私は同じindex.android.jsファイルで、この単純なコードを持っていて移動します。

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

// First Page 
class FirstPage extends Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello First Page</Text> 
     <Button 
      onPress={() => navigate('SecondPage')} 
      title="Go to second page" 
     /> 
     </View> 
    ); 
    } 
} 

// Second Page 
class SecondPage extends Component { 
    static navigationOptions = { 
    title: 'Second Page', 
    }; 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello Second Page</Text> 
     <Button 
      onPress={() => navigate('FirstPage')} 
      title="Go to first page" 
     /> 
     </View> 
    ); 
    } 
} 


const SimpleApp = StackNavigator({ 
    FirstPage: { screen: FirstPage}, 
    SecondPage: { screen: SecondPage}, 
}); 

AppRegistry.registerComponent('MoviesTickets_YCH',() => FirstPage); 

私が欲しいのは、画面間を移動することですが、私は持っていますエラーメッセージ：変数を見つけることができません：ナビゲート、私はそれが何故起こるのか、何のアイデアはありませんどのように？ renderメソッドであなたの助け

Answer 1

ため

おかげで、次の行を追加します。

のconst {移動} = this.props.navigation。

あなたのレンダリングは、あなたがナビゲートを使用して、各コンポーネントでこの

render(){ 
const {navigate} =this.props.navigation; 
return (
    ....) ; 
} 

のようになります。 もっと詳しい情報は、ドキュメントに従ってください。かなり簡単です。 reactnavigation

Answer 2

私は明らかだ場合、ネイティブドキュメントは、それがアクションの作成者だとあなたはthis.props.navigationでそれにアクセスもを得ることができますnavigateを言って反応します。

const { navigate } = this.props.navigation; in render。