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

Question

我是 React Native 的初学者。但 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>);
    }
}

当我运行这段代码时，出现以下错误 Element type is invalid : expected a string or a class/function but got undefined check the render method of 'App'

目标是拥有一种负责应用程序生命周期的 Controller App.js。 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 导入的.