React-native：无法读取属性＆＃39;导航＆＃39;未定义的

Question

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

this.props只返回{}。不确定为什么。

login.component.js

;

路由/ index.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;

App.container.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;

index.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;

我可以在这些更改后加载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已经填满，一切都应该运行正常。

我希望它有所帮助！