使用多个模块构建应用程序的React-Native

Question

我是一个初学者，反应自然。但不适用于JavaScript。

在我app.js我愿做这样的事情：

export default class App extends Component { 
    constructor(props){ 
     super(props); 
     //init a lot of modules 
     this.all_modules = []; 
     var MenuGame = require ('/modules/mod_menu/mod_menu.js'); 
     this.all_modules.push(new MenuGame()); 
    } 
    render(){ 
     //render all modules 
     var views = []; 
     views = this.all_modules.map(function(module){ 
      return module.render(); 
     }); 
     return (<View>{views}</View>); 
    } 
} 

在我mod_menu.js我：

Class MenuGame extends React.component{ 
    render(){ 
     return(<Text>foo</Text>); 
    } 
} 

当我运行这段代码，我得到以下错误元素类型无效：期望一个字符串或一个类/函数，但未定义检查'App'的渲染方法

目标是拥有一种控制器App.js负责生命周期e的应用程序。 App.js只需要初始化所有模块并在其上调用渲染。每个模块将构建应用程序。

你能帮我吗？

编辑：源代码：https://jsfiddle.net/n7habkt3/

Answer 1

被修改：

通知在mod_menu_game.js和mod_menu_game.view.js以下：

var { 
    Text 
} = React; 

这是你的问题的原因。 <Text>组件应该从react-native进口，而不是react。

要修复它，用下面的更换（这两个文件）：

import { Text } from 'react-native'; 

P.S：在mod_menu_game.js，您在render()返回两个组件（线53和54）。我的建议是在返回之前将它们包装在<View>中。请再次确认它是从react-native导入的。