堆叠导航器给我一个未定义的错误

Question

我使用的方式是https://facebook.github.io/react-native/docs/navigation.html。我想使用StackNavigator从Login.js去AboutDendro.js。我的<Button/>组件发生了什么问题，它将该错误引发到我的iOS模拟器中？

这里的Login.js：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native'; 
import { login } from '../redux/actions/auth'; 
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity'; 
import StackNavigator from 'react-navigation'; 
import AboutDendro from './AboutDendro'; 

const awsCognitoSettings = { 
    UserPoolId: 'something', 
    ClientId: 'something' 
}; 

class Login extends Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      page: 'Login', 
      username: '', 
      password: '' 
     }; 
    } 

    get alt() { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; } 

    handleClick (e) { 
     e.preventDefault(); 
     const userPool = new CognitoUserPool(awsCognitoSettings); 

     // Sign up 
     if (this.state.page === 'SignUp') { 
      const attributeList = [ 
       new CognitoUserAttribute({ Name: 'email', Value: this.state.username }) 
      ]; 
      userPool.signUp(
       this.state.username, 
       this.state.password, 
       attributeList, 
       null, 
       (err, result) => { 
        if (err) { 
         alert(err); 
         this.setState({ username: '', password: '' }); 
         return; 
        } 
        console.log(`result = ${JSON.stringify(result)}`); 
        this.props.onLogin(this.state.username, this.state.password); 
       } 
      ); 
     } else { 
      const authDetails = new AuthenticationDetails({ 
       Username: this.state.username, 
       Password: this.state.password 
      }); 
      const cognitoUser = new CognitoUser({ 
       Username: this.state.username, 
       Pool: userPool 
      }); 
      cognitoUser.authenticateUser(authDetails, { 
       onSuccess: (result) => { 
        console.log(`access token = ${result.getAccessToken().getJwtToken()}`); 
        this.props.onLogin(this.state.username, this.state.password); 
       }, 
       onFailure: (err) => { 
        alert(err); 
        this.setState({ username: '', password: '' }); 
        return; 
       } 
      }); 
     } 
    } 

    togglePage (e) { 
     this.setState({ page: this.alt }); 
     e.preventDefault(); 
    } 

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

    render() { 
     const { navigate } = this.props.navigation; 
     const App = StackNavigator({ 
      Home: { screen: Login }, 
      Profile: { screen: AboutDendro }, 
     }); 

     return (
      <ScrollView style={{padding: 20}}> 
       <Button 
        title="Go to Jane's profile" 
        onPress={() => 
         navigate('AboutDendro', { name: 'AboutDendro' }) 
        } 
       /> 
       <Text style={{fontSize: 27}}>{this.state.page}</Text> 
       <TextInput 
        placeholder='Email Address' 
        autoCapitalize='none' 
        autoCorrect={false} 
        autoFocus={true} 
        keyboardType='email-address' 
        value={this.state.username} 
        onChangeText={(text) => this.setState({ username: text })} /> 
       <TextInput 
        placeholder='Password' 
        autoCapitalize='none' 
        autoCorrect={false} 
        secureTextEntry={true} 
        value={this.state.password} 
        onChangeText={(text) => this.setState({ password: text })} /> 
       <View style={{margin: 7}}/> 
       <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/> 
       <View style={styles.firstView}> 
        <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}> 
         {this.alt} 
        </Text> 
       </View> 
      </ScrollView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    buttons: { 
     fontSize: 12, 
     color: 'blue', 
     flex: 1 
    }, 

    firstView: { 
     margin: 7, 
     flexDirection: 'row', 
     justifyContent: 'center' 
    } 
}); 

const mapStateToProps = (state, ownProps) => { 
    return { 
     isLoggedIn: state.auth.isLoggedIn 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onLogin: (username, password) => { dispatch(login(username, password)); } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Answer 1

这是因为navigation是不是在你的道具。它是您创建的App组件的一部分。但是你对这个组件不做任何事情。

您应该有一个App.js文件，并使用您的stackNavigator，将您的Login组件设置为您的stackNavigator参数中的默认组件。

看看this documentation

Answer 2

我尝试重构你的代码。 在组件render也许你可以这样写：

render() { 
    const { navigate } = this.props.navigation; 
    return (
     <ScrollView style={{padding: 20}}> 
      <Button 
       title="Go to Jane's profile" 
       onPress={() => 
        navigate('Profile', { name: 'AboutDendro' }) 
       } 
      /> 
      <Text style={{fontSize: 27}}>{this.state.page}</Text> 
      <TextInput 
       placeholder='Email Address' 
       autoCapitalize='none' 
       autoCorrect={false} 
       autoFocus={true} 
       keyboardType='email-address' 
       value={this.state.username} 
       onChangeText={(text) => this.setState({ username: text })} /> 
      <TextInput 
       placeholder='Password' 
       autoCapitalize='none' 
       autoCorrect={false} 
       secureTextEntry={true} 
       value={this.state.password} 
       onChangeText={(text) => this.setState({ password: text })} /> 
      <View style={{margin: 7}}/> 
      <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/> 
      <View style={styles.firstView}> 
       <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}> 
        {this.alt} 
       </Text> 
      </View> 
     </ScrollView> 
    ); 
    } 
} 

，你喜欢分开以下组件render()组件StackNavigation：

const App = StackNavigator({ 
     Home: { screen: Login }, 
     Profile: { screen: AboutDendro }, 
    }); 

在index.ios.js等，然后进口组件应用程序：

import './Login';

就是这样。也许我的回答可以帮助你。