爲什麼我的堆棧導航器不顯示？

Question

我正在嘗試在我的程序中使用StackNavigator。在Login.js文件中，我嘗試使用<Button/>來實現此目的，但不起作用。我收到下面的錯誤。爲什麼會這樣呢？順便提一下https://facebook.github.io/react-native/docs/navigation.html。

這裏的index.ios.js：

import React, { Component } from 'react'; 
import { AppRegistry, View} from 'react-native'; 
import { Provider } from 'react-redux'; 
import Application from './pages/Application'; 
import store from './redux'; 
import api from './utilities/api'; 
import StackNavigator from 'react-navigation'; 
import Login from './pages/Login'; 
import About from './pages/About'; 

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

export default class DApp extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data: [], 
      isLoading: true 
     } 
     console.log("something"); 
    } 

    componentWillMount() { 
     api.getData().then((res) => { 
      this.setState({ 
       data: res.data 
      }) 
     }); 
    } 

    render() { 
     if(this.state.isLoading) { 
      console.log("The data is: " + this.state.data); 
     } else { 
      console.log("Else got executed"); 
     } 

     return (
      <View> 
       <Provider store={store}> 
        <Application/> 
       </Provider> 
       <App/> 
      </View> 
     ); 
    } 
} 

AppRegistry.registerComponent('DApp',() => DApp); 

這裏的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 About from './About'; 

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'; 
    // } 

    get alt() { 
     if(this.state.page == 'Login') { 
      return 'SignUp'; 
     } else { 
      return '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(); 
    } 

    render() { 
     const { navigate } = this.props.navigation; 
     return(
      <ScrollView style={{padding: 20}}> 
       <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> 
        <Button 
         title="Go to about" 
         onPress={() => 
          navigate('About', { name: 'About' }) 
         } 
        /> 
       </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

你沒有正確導入StackNavigator。 import { StackNavigator } from ‘react-navigation’;