期待される文字列/クラス/関数オブジェクトを取得

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

これは私のコードです10

index.ios.js：

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

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

問題はインデックスにであるように思われます。私が試したものはうまくいかなかった。 助けてください？

Answer 1

React NavigationのWebサイトの例を考慮して、StackNavigatorオブジェクトはAppRegistryに登録されているルートコンポーネントである必要があります。 Viewまたは別のコンポーネントにネストすることはできません。あなたはindexファイルを削除し、これにあなたのindex.ios.jsファイルを変更、

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

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

変更するのであれば、それはあなたのために働く必要があります。