Question

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

我正在做的是，我有一个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;

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

Answer 1

删除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

单击按钮时，undefined不是对象（评估'_this.props.navigation.navigate'）

1 个答案: