undefinedはオブジェクトではありません（ '_this2.props.navigation.navigate'を評価しています） - React Native

Question

私は本当にナビゲーションを動作させることができません。反応ナビゲーション（StackNavigator）を使用しています。

これは私の構造体である： http://i.imgur.com/IKExx9g.png

私のナビゲーションはHomeScreen.jsで動作します。私は問題なくHomeScreen.jsからNewScreen.jsに移動します。

App.js：

import React from 'react'; 
import { 
    StatusBar, AppRegistry 
} from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 
import {HomeScreen} from './screens/HomeScreen'; 
import AboutScreen from "./screens/AboutScreen"; 
import NewScreen from "./screens/NewScreen"; 
import CalendarScreen from "./screens/CalendarScreen"; 
import AddAgendaScreen from "./screens/AddAgendaScreen"; 

const SimpleApp = StackNavigator({ 
    Home: {screen: HomeScreen}, 
    About: {screen: AboutScreen}, 
    New: {screen: NewScreen}, 
    Calendar: {screen: CalendarScreen}, 
    AddAgenda: {screen: AddAgendaScreen} 
}); 

console.disableYellowBox = true; 
StatusBar.setHidden(true); 
export default SimpleApp; // Export root navigator as the root component 

Homescreen.js（作業）：

export class HomeScreen extends React.Component { 
    static navigationOptions = ({navigation}) => { 
    const {state, navigate} = navigation; 
    return { 
     title: 'eXopera' 
    }; 
    }; 

    constructor() { 
    super(); 
    this.state = { 
     address: [], 
     refreshing: false, 
     page: 1, 
     lastPage: 1, 
     loading: true, 
     listOpacity: 0, 
    }; 
    } 

    render() { 
    return (
     <ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar />}> 
     <View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen"> 
      <Button color="#33cd5f" title="NEW" 
      onPress={() => this.props.navigation.navigate('New') }/> 
     </View> 
     </ScrollableTabView> 
    ); 
    } 
} 

それから私はまたに移動しようとCalendarScreen.jsと呼ばれる別のコンポーネントは、（そこにありますNewScreen.js）、HomeScreen.jsからコードを完全にコピー＆ペーストしても、ナビゲートできません。それは常に私に "未定義はオブジェクトではありません（評価 '_this2.props.navigation.navigate'）"です。

私は今何ができるかわかりません。何時間もこれに苦しんできました。

ありがとうございます！

Answer 1

別に反応し、ナビゲーションから、私はまた、react-native-scrollable-tab-viewを使用していました。私はタブナビゲーションのナビゲーションの小道具を渡すことによってそれを解決した

：

<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>

は次にあなたにも this.props.navigationなどの他のコンポーネントにアクセスすることができます。

Answer 2

新しい画面がアプリナビゲータに登録されていないため、navigation小道具がないようです。あなたのコンストラクタは次のようにする必要があります：

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    New: { screen: NewScreen }, // Add this 
});