未定義不是一個對象（評估'_this2.props.navigation.navigate'） - 反應本地

Question

我真的無法讓我的導航工作。我正在使用react-navigation（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 
});