Kann benutzerdefinierte Komponente nicht in nativen React ausführen

Question

Benötigen Sie Hilfe zu React Native. In Google gesucht, aber keine Lösung gefunden. Ich habe ein Projekt, das auf Android funktioniert. Hier Code:

import React, { Component } from 'react'; 
    import { 
     AppRegistry, 
     StyleSheet, 
     Text, 
     View 
    } from 'react-native'; 
    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.android.js 
      </Text> 
      <Text style={styles.instructions}> 
       Double tap R on your keyboard to reload,{'\n'} 
       Shake or press menu button for dev menu 
      </Text> 
      </View> 
     ); 
     } 
    } 

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

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

Aber wenn ich versuche, meine eigene Komponente es wie folgt hinzuzufügen:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import MainPage from "./app/components/MainPage/MainPage"; 

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.android.js 
     </Text> 
     <Text style={styles.instructions}> 
      Double tap R on your keyboard to reload,{'\n'} 
      Shake or press menu button for dev menu 
     </Text> 

     <MainPage/> 
     </View> 
    ); 
    } 
} 

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

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

i erhalten Fehler in Emulator:

Kann jemand helfen? -Code für die Komponente Mainpage:

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

export default class MainPage extends Component { 
    render() { 
     return (
      <View> 
       <Text style={styles.welcome}> 
        Welcome to React Native! 
       </Text> 

      </View> 
     ); 
    } 
} 

MainPage.propTypes = {} 

MainPage.defaultProps = {} 

const styles = StyleSheet.create({ 
    welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
    } 
}); 

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

Answer 1

Ich finde Lösung. Es war wegen des Dateiformats. Es sollte .js sein und nicht .jsx. Nach dieser Korrektur funktioniert alles gut. Ich hoffe, es wird jemandem helfen