使用多個模塊構建應用程序的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導入的。