Question

我已经看到很多人遇到这个问题，但是没人能为我解决这个错误。我收到的错误是：

undefined is not an object react native evaluating this.props.navigation Here is a picture https://imgur.com/a/JP9RLZT

我的目标是创建一个登录屏幕，该登录屏幕会转到带有选项卡栏的主屏幕。该栏有效，但是由于上述错误，我不知道如何使登录屏幕打开到该屏幕。

我适用文件的代码如下：

app.js

  import React from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation'
import MainScreen from './Components/MainScreen'
import Login from './Components/Login/Login'

export default class App extends React.Component {
  static navigationOptions = {
  title: 'LoginScreen',
  headerStyle: {
  backgroundColor: '#212121',
  },
  headerTitleStyle: {
  color: '#fff'
  }
  };

  render() {
    //const { navigate } = this.props.navigation;
    return (
      <Login />
    );
  }

}

const AppStackNavigator = StackNavigator({

  Login: {
    screen: Login
  },
  Main: {
    screen: MainScreen
  },

},
{
  initialRouteName: 'Login'
}

)



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

AppRegistry.registerComponent('BIDMCATHOME', () => AppStackNavigator);

这是我的登录屏幕代码

 import React, { Component } from "react";
import {
    Text,
} from "react-native";
import { Alert, Button, TextInput, View, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from 'react-navigation';


import { Icon } from 'native-base'

export default class Login extends Component {


  constructor(props) {
    super(props);
    const { navigate } = this.props.navigation;
    this.state = {
      username: '',
      password: '',
    };
  }

  onLogin() {
    const { username, password } = this.state;

  //  Alert.alert('Credentials', `${username} + ${password}`);
  }





  render() {
    const { navigate } = this.props.navigation

    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.username}
          onChangeText={(username) => this.setState({ username })}
          placeholder={'Username'}
          style={styles.input}
        />
        <TextInput
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          style={styles.input}
        />

        <Button
        value={this.state.Login}
          title={'Login'}
          style={styles.input}
          onPress={() =>
        navigate('MainScreen', { name: 'MainScreen' })}/>


      </View>
    );
  }
}




const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  input: {
    width: 200,
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,
  },
});

这是我的主屏幕（标签栏屏幕代码）

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Platform
} from "react-native";

import HomeTab from './AppTabNavigator/HomeTab'
import SearchTab from './AppTabNavigator/SearchTab'
import AddMediaTab from './AppTabNavigator/AddMediaTab'
import LikesTab from './AppTabNavigator/LikesTab'
import ProfileTab from './AppTabNavigator/ProfileTab'

import { TabNavigator } from 'react-navigation'
import { Icon } from 'native-base'

class MainScreen extends Component {

  static navigationOptions =
   {
      title: 'MainScreen',
   };


    render() {
        return (
            <AppTabNavigator />
        );
    }
}
export default MainScreen;

const AppTabNavigator = TabNavigator({

    HomeTab: {
        screen: HomeTab
    },
    SecondTab: {
        screen: SearchTab

    },
    ThirdTab: {
        screen: AddMediaTab
    },
    MedList: {
        screen: LikesTab
    },
    ProfileTab: {
        screen: ProfileTab
    }

}, {
        animationEnabled: false,
        swipeEnabled: true,
        tabBarPosition: "bottom",
        tabBarOptions: {
            style: {
                ...Platform.select({
                    android: {
                        backgroundColor: 'white'
                    }
                })
            },
            activeTintColor: '#000',
            inactiveTintColor: '#d1cece',
            showLabel: true,
            showIcon: false
        }
    })

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

Answer 1

我想您登录组件中的this.props.navigation未定义。您能否使用控制台日志进行验证？

Answer 2

当您使用某个组件并要通过该组件导航到其他页面时，必须将this.props.navigation传递给该组件。在您的代码中，您将Login用作组件，因此可以使用以下代码：

render() {
    //const { navigate } = this.props.navigation;
    return (
         <Login navigation={this.props.navigation} />
     );
 }

希望这对您有所帮助。

React Native-“未定义不是对象对此native进行评估this.props.navigation”

2 个答案: