2017-02-06 3 views
1

これは以前に尋ねられた質問のようですが、私のコードで既に持っているものか、自分のコードベースよりもはるかに複雑なコードベースの問題を解決します。私がしようとしているのは、React Native CLIから生成されたスターターコードからアプリケーションの中心的なエントリーポイントを作成することだけです。ここで私がこれまで持っているものです。React Nativeアプリケーションを作成するときにエラーが発生しました:要素タイプが無効です:文字列またはクラス/関数が必要ですがオブジェクトがあります。

index.ios.js:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import MyApp from './index'; 

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

index.android.js:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import MyApp from './index'; 

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

index.js:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    }, 
    instructions: { 
     textAlign: 'center', 
     color: '#333333', 
     marginBottom: 5, 
    }, 
}); 

export default class MyApp extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.welcome}> 
       Welcome to React Native! 
       </Text> 
       <Text style={styles.instructions}> 
       To get started, edit index.ios.js 
       </Text> 
       <Text style={styles.instructions}> 
       Press Cmd+R to reload,{'\n'} 
       Cmd+D or shake for dev menu 
       </Text> 
      </View> 
     ); 
    } 
} 

はまだしようアプリを実行すると、次の結果が得られます。 red screen export default classを使用して問題を修正する必要があると示唆していますが、これは既にアプリケーションを作成したときに使用されていました。これを引き起こしている可能性のあることに関する提案はありますか?前もって感謝します。

答えて

4

ルートフォルダのindex.jsを移動してみます。

このように、フォルダ "SRC" を作成し、このフォルダにindex.jsを移動し、index.ios.jsindex.android.jsでそれをインポートします。

import MyApp from './src/index'; 

問題同じroot-pathのindex.jsとindex.ios.jsは良い考えではありません。私はテストアプリケーションで試してみました。

+0

うわーなぜ私はまったく正確ではない(再び、私はRNにはとても新しい)が、これはうまくいった!本当にありがとう! – Nickersoft

+0

私のために働いても、RNはあなたがルートディレクトリにindex.jsを持っているのが好きではないようです...:/ –

関連する問題