2016-09-08 60 views
2

基本上我想将反应原生代码拆分为几个js文件。我有我的主'index.ios.js'文件。我有些感动代码(MainComponent类)到另一个文件:“./iOSCode/main.js'React native - 将整个文件/分割js代码导入多个文件

如何导入整个‘./iOSCode/main.js’文件内容为” 指数.ios.js'?

我想:

import { MainComponent as MainComponent } from './iOSCode/main.js'; 

and 

import MainComponent from './iOSCode/main.js'; 

,没有运气...

我得到一个错误:

Element type is invalid: expected a string (for built-in components) or class/function [...] but got: undefined 
intantiateReactComponent.js:70 
instantiateChild ReactChildReconciler.js:45 

==========

编辑:

从@ Jagadish Upadhyay建议我失踪近MainComponent类出口语句中” ./iOSCode/main.js'

代码:

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

export class MainComponent extends Component { 

    render() { 
    return (
     <Text> abc </Text> 
    ); 
    } 
} 
+1

你有导出类吗?你能发布代码吗? –

+0

是的,我错过了MainComponent类中的'export'语句。谢谢。 还有一种方法可以导入整个文件吗?不仅仅是'./iOSCode/main.js'中的一个类? –

+1

@ kosiara-BartoszKosarzycki有一种方法可以导入所有导出,如果这就是你的意思......例如,如果你导出了两个类,你可以在main中输入'import *作为NameOfModule,'NameOfModule'将包含所有的出口 – azium

回答

4

分离出你需要添加出口声明一个类,使用此导入格式:

import { MainComponent as MainComponent } from './iOSCode/main.js'; 

您也可以将样式移出单独的文件。

styles.js:

import { 
    StyleSheet 
} from 'react-native'; 

const styles = StyleSheet.create({ 

    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}); 

module.exports = styles; 

,并在主js文件中使用此导入:

import * as styles from './styles.js'; 

记住补充: 'module.exports =风格;'

相关问题