未定义不是一个对象（评估'_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 
});