无法在React本机中运行自定义组件

需要React Native的帮助。在Google中搜索，但没有找到任何解决方案。我有一个在android上工作的项目。下面的代码：无法在React本机中运行自定义组件

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

但是，当我尝试添加自己的组件，但是这样的：

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

我得到错误的模拟器：

有人可以帮忙吗？组件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);

来源

2017-06-20 Дима Философ

你的问题似乎是你的模块导入文件的路径。确保它是正确的。 –

这是对的。我检查了它。我不明白为什么会发生，因为路径是正确的。 –

我找到解决办法。这是因为文件格式。它应该是.js而不是.jsx。这个修正后，一切正常。我希望它能帮助别人

来源

2017-06-25 00:55:47

无法在React本机中运行自定义组件

回答

相关问题