单击按钮时,undefined不是对象(评估'_this.props.navigation.navigate')

时间:2019-08-02 08:08:59

标签: react-native react-navigation expo

我对本机和反应导航还很陌生,并试图通过单击按钮从一个屏幕切换到另一个屏幕,并不断出现此错误。我在SO(thisthis)上找到了类似的问题,但它们对我不起作用,请继续获取此错误。

我正在做的是,我有一个App.js,它是初始屏幕,现在它显示一个登录表单(称为Splash):

import React from 'react';
import {
  View,
  ActivityIndicator,
  StyleSheet
} from 'react-native';
import { createDrawerNavigator, createAppContainer } from "react-navigation";
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
import Splash from './Splash';

export default class App extends React.Component {

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

    return (
      <View>
        <Splash navigation={navigation}/>
      </View>
    );
  }
}

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  }
}, {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: '#e91e63'
    }
});

const AppContainer = createAppContainer(AppNavigator);

在我的启动画面上,我现在没有任何功能,因为当我按下“登录”按钮时,我只是试图将其移动到主画面:

import React, { Component } from 'react';
import {
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet
} from 'react-native';

class Splash extends Component {
    constructor(props) {
        super(props);                
    }

    render() {
        return (
            <ScrollView style={{padding: 20}}>
                <TextInput  autoCapitalize="none" 
                            onSubmitEditing={() => this.passwordInput.focus()} 
                            autoCorrect={false} 
                            keyboardType='email-address' 
                            returnKeyType="next" 
                            placeholder='Email address' 
                            placeholderTextColor='rgba(225,225,225,0.7)'/>

                <TextInput  returnKeyType="go" 
                            ref={(input)=> this.passwordInput = input} 
                            placeholder='Password' 
                            placeholderTextColor='rgba(225,225,225,0.7)' 
                            secureTextEntry/>

                <TouchableOpacity onPress={() => this.props.navigation.navigate('Home')}>
                            <Text>LOGIN</Text>
                </TouchableOpacity>     
            </ScrollView>
            )
    }
};

export default Splash;

现在发生的是,当我按下登录按钮时,标题中出现了错误。关于我在做什么错的任何线索?

1 个答案:

答案 0 :(得分:0)

删除App组件,在这种情况下,您不需要它。将Splash设置为初始屏幕

const AppNavigator = createDrawerNavigator({
  Splash: {
    screen: Splash
  },
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  }
}, {
    initialRouteName: "Splash",
    contentOptions: {
      activeTintColor: '#e91e63'
    }
});

然后直接导出AppContainer

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer