undefined不是一个对象(评估'_this2.props.navigation.navigate') - React Native

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中的代码,我也无法导航.它总是给我" undefined不是一个对象(评估'_this2.props.navigation.navigate') ".

我真的不知道我现在能做些什么..几个小时一直在努力.

提前致谢!

Answer 1

除了react-navigation之外,我还使用了react-native-scrollable-tab-view.

我通过选项卡导航传递导航道具解决了这个问题:

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

然后您也可以在其他组件中访问它this.props.navigation.