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

当我运行此代码时，我得到以下错误元素类型无效：期望字符串或类/函数但未定义检查＆＃39;应用程序＆＃39;

的渲染方法

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

你能帮助我吗？

编辑：源代码：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导入。

React-Native使用多个模块构建App

1 个答案: