Question

我正在尝试从登录屏幕导航到标签屏幕，但我收到以下错误

未定义不是对象（评估 'this.props.navigation.navigate'）

以下是 Login.js ：

 import React, {Component} from 'react';
import {Text, View, StyleSheet, ImageBackground, Image, TextInput} from 'react-native';
import { Button } from 'react-native-elements'
import firebase from 'firebase';

const textInputConfig = {
  placeholderTextColor : '#838383',
}

export default class Login extends Component<{}>{

  static navigationOptions = {
     header: null
   }

  login() {
    this.props.navigation.navigate('Tabs');
  }

  render (){
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <Image source={require('../resources/images/app_logo.png')} style={styles.logo}/>
              <View style={styles.formContainer}>
                  <TextInput style={styles.textInput} placeholder='Username'
                      placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Email'
                      placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Password'
                      secureTextEntry={true} placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <Button raised title='SIGN UP' buttonStyle={styles.signupButton}
                      containerViewStyle={styles.signupButtonContainer} onPress={() => this.login()} />
             </View>
        </ImageBackground>
      </View>
    );
  }
}
.....

以下是我的 Router.js

import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import Home from '../screens/Home';
import MyCards from '../screens/MyCards';
import AddCard from '../screens/AddCard';
import Login from '../screens/Login.js';


export const MainScreenNavigator = TabNavigator({
 Home: {
   screen: Home,
  navigationOptions : {
     tabBarLabel: 'Home',
     tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
   },
 },
 MyCards: {
   screen: MyCards,
   navigationOptions : {
    tabBarLabel: 'My Cards',
    tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />
  },
 },
},
 {
   tabBarPosition: 'bottom',
   animationEnabled: true,
   tabBarOptions: {
     activeTintColor: '#e91e63',
   },
 },
);

export const AppNavigation = StackNavigator({
    LoginScreen: { screen: Login },
    Tabs: { screen: MainScreenNavigator},
    AddCard: { screen: AddCard }
  },
  {
   headerMode: 'screen'
 });

有人能说出我做错了吗？

编辑Login.js：

import React, {Component} from 'react';
import {Text, View, StyleSheet, ImageBackground, Image, TextInput} from 'react-native';
import { Button } from 'react-native-elements'
import firebase from 'firebase';

const textInputConfig = {
  placeholderTextColor : '#838383',
}

export default class Login extends Component<{}>{

  static navigationOptions = {
     header: null
   }

  login = () => {
    console.log("login function");
    this.props.navigation.navigate('Tabs');
  }

  render (){
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <Image source={require('../resources/images/app_logo.png')} style={styles.logo}/>
              <View style={styles.formContainer}>
                  <TextInput style={styles.textInput} placeholder='Username'
                      placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Email'
                      placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Password'
                      secureTextEntry={true} placeholderTextColor={textInputConfig.placeholderTextColor} autoCapitalize='none'/>
                  <Button raised title='SIGN UP' buttonStyle={styles.signupButton}
                      containerViewStyle={styles.signupButtonContainer} onPress={this.login} />
             </View>
        </ImageBackground>
      </View>
    );
  }
}

Answer 1

它有参考问题！

将onPress={() => this.login()}替换为onPress={this.login.bind(this)}

<Button raised title='SIGN UP' buttonStyle={styles.signupButton}
                  containerViewStyle={styles.signupButtonContainer} onPress={this.login.bind(this)} />

未定义不是对象React Navigation

1 个答案: