预期的字符串/类/功能得到对象

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); 

它应该为你工作。