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

Question

我真的无法导航到 work.I 我正在使用 react-navigation (StackNavigator)。

我的导航在 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 is not an object (evaluating '_this2.props.navigation.navigate')”。

我真的不知道我现在能做什么.. 已经为此苦苦挣扎了几个小时。

提前致谢！

Answer 1

听起来您的新屏幕没有在应用程序导航器中注册，因此没有 navigation 道具。你的构造函数应该是这样的：

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

Answer 2

除了react-navigation，我还使用了react-native-scrollable-tab-view。

我已经通过标签导航传递导航道具解决了：

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

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

Answer 3

我将方法从 renderHeader(){ ... } 更改为

renderHeader = () => {
    const title= 'Sign Up';
    return (
      <View style={{
        padding: 20,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Icon
          onPress={() => {
                           this.props.navigation.navigate('find');
                         }
                  }
          name='arrow-back'
          type='MaterialIcons'
          color='white'
        />
      </View>
    );
}

解决了这个问题。

use renderHeader = () => {} instead of using renderHeader(){} is critically important in solving my issue.

Answer 4

伙计们不要给出胡说八道的答案，主要是您需要授予权限才能访问 props 子组件。解决方案 => Access the navigation prop from any component

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

undefined is not an object (evaluating '_this2.props.navigation.navigate') - React Native

javascript

reactjs

react-native

react-navigation