React-native：无法读取未定义的属性“导航”

Question

当我尝试从主屏幕导航到不同的屏幕时，我遇到了错误。我在路线中定义了初始加载屏幕。从初始屏幕尝试导航到其他屏幕，然后出现以下错误。

this.props 只返回 {}。不太清楚为什么。

login.component.js

import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';


import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  Touchable,
  Image,
  Button
} from 'react-native';


import { handleFbLogin } from '../../config/authConfig/';

class Login extends Component {


  render () {
    console.log("this.props")
    console.log(this.props)

    return (
    <View style={{flex: 1,backgroundColor: '#37afa6'}}>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('setupProfile')}
        />
    </View>

    );
  }
}


export default Login;

路由/index.js

import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';

const Config = {
  navigation: {
    login: {
      screen: Login
    },
    setupProfile: {
      screen: SetupProfile,
    }
  }
}

export default Config;

App.container.js

import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';


import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

class App extends Component {
  render () {
    return (
          <Router /> 
    );
  }
}


export default App;

index.js（启动点）：

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';

export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});

AppRegistry.registerComponent('BuddApp', () => AppNavigator);

export default app;

我能够在这些更改后加载 initalscreen，但尝试导航时仍然出现相同的错误。

Answer 1

编辑：

我明白了。您忘记了登录屏幕中的构造函数，这就是您的道具为空的原因：

constructor(props) {
    super(props);
}

以前的答案：

如果没有完整的代码，我看不出确切的问题是什么，但我会给你一个使用 react-navigation 的例子：

在您的 index.js（应用程序的起点）中：

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);

在导航配置中：

const Config = {
navigation: {
  login: {
     screen: Login
  },
  setupProfile: {
     screen: SetupProfile,
  }
 }
}

在导航配置中找到的第一个对象是应用的开始。

现在您可以在“登录”页面中使用您的导航功能导航：

this.props.navigation.navigate('setupProfile')

如果 AppRegistry 被填满，一切都应该运行良好。

希望对你有帮助！