預期的字符串/類/功能得到對象

Question

我想在我的應用程序中實現React-Navigation。 當我運行的應用程序崩潰與錯誤：

Element type is invalid: expected a string or class/function but got: object. You likely forgot to export your component from the file it's defined in. 

我搜索在這裏，但我想任何解決方案沒有奏效。 這是我的代碼：

指數：

import React, { Component } from 'react'; 
import { View } from 'react-native'; 
import { Root } from './config/router'; 

class Stylelist extends Component{ 
    render(){ 
    return(
     <View> 
     <Root /> 
     </View> 
    ); 
    } 
} 

export default Stylelist; 

路由器：

import React from 'react'; 
import { StackNavigator } from 'react-navigation'; 
import Login from '../views/Login'; 

export const Root = StackNavigator({ 
    Login:{ 
    screen: Login, 
    }, 
    Register:{ 
    screen: Register, 
    navigationOptions:{ 
     title: 'Registertion' 
    } 
    } 
}); 

登錄：

import React, { Component } from 'react'; 
import { View, StyleSheet, Text, Image, TextInput, TouchableOpacity, KeyboardAvoidingView, StatusBar } from 'react-native'; 

//TODO: Change StatusBar color. 
export default class Login extends Component{ 

    constructor(props){ 
    super(props); 
    } 

    render(){ 
    const { navigate } = this.props.navigation; 
    return(
     <KeyboardAvoidingView behavior="padding" style={styles.container}> 
     <StatusBar 
      barStyle="light-content"> 
     </StatusBar> 
     <View style={styles.logoContainer}> 
      <Image 
      style={styles.logoImg} 
      /> 
     </View> 

     <View style={styles.formContainer}> 
      <TextInput 
      placeholder="email" 
      placeholderTextColor="#315D49" 
      returnKeyType="next" 
      onSubmitEditing={()=> this.passwordInput.focus()} 
      keyboardType="email-address" 
      autoCapitalize="none" 
      autoCorrect={false} 
      color="#315D49" 
      style={styles.input} /> 
      <TextInput 
      placeholder="password" 
      placeholderTextColor="#315D49" 
      secureTextEntry={true} 
      returnKeyType="go" 
      ref={(input)=> this.passwordInput = input} 
      color="#315D49" 
      style={styles.input} /> 
      <TouchableOpacity style={styles.buttonContainer}> 
      <Text style={styles.buttonText}> 
       LOGIN 
      </Text> 
      </TouchableOpacity> 

      <TouchableOpacity style={styles.signupContainer} onPress={()=>navigate('Register')}> 
      <Text style={styles.signupText}> 
       Don't have an account yet? 
      </Text> 
      </TouchableOpacity> 
     </View> 
     </KeyboardAvoidingView> 
    ); 
    } 
} 

註冊：

import React, { Component } from 'react'; 
    import { View, StyleSheet } from 'react-native'; 
    export default class Register extends Component{ 
    render(){ 
     return(
     <View style={styles.container}> 
      <Text> 
       Register page. 
      </Text> 
     </View> 
    ); 
    } 
    } 

const styles = StyleSheet.create({ 
    container:{ 
     flex: 1, 
    } 
}); 

個

index.ios.js：

import { AppRegistry } from 'react-native'; 
import Stylelist from './index'; 

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

的問題似乎是在指數。但是我嘗試過的任何東西都沒有用。 有幫助嗎？

Answer 1

根據我的基本理解，考慮到React Navigation網站上的示例，您的StackNavigator對象應該是註冊到AppRegistry的根組件。它不能嵌套在View或其他組件中。所以，如果你更改刪除index文件，並改變你的index.ios.js文件到這一點，

import { AppRegistry } from 'react-native'; 
import { Root as Stylelist } from './config/router'; 

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

它應該爲你工作。