React Native - 導航器遞歸子項崩潰

Question

我正在查看React-Native中的導航器組件，但無法讓它接受已在堆棧中的子節點。例如。例如，如果我們以Facebook應用程序爲例。用戶可以搜索用戶，然後點擊好友，然後點擊另一個用戶。這崩潰當我嘗試將其與

Invariant Violation: Expected a component class, got [object Object]. 

我已經通過標準的導航嘗試這樣做，目前陣營，本機路由器的錯誤添加到堆棧中。我現在的代碼看起來像這樣

class OptionsBranch extends Component { 
    render() { 
     /*<TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight>*/ 
     return (
      <View style={styles.container}> 
       <Text>[OptionsScreen]</Text> 
       <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toRoute({id:"x", name:"test", component:UserProfile})}}><Text>[push]</Text></TouchableHighlight> 
       <TouchableHighlight style={styles.spaceOut} onPress={() => {this.props.toBack()}}><Text>[pop]</Text></TouchableHighlight> 
      </View> 
     ); 
    } 
} 

我可以得到這個無限期的工作，只要我不再重用一個類。我做的那一刻，我得到了錯誤。

我會張貼鏈接到研究，但沒有太多的Navigator（而不是NavigatorIOS），除了包含在框架中的樣本，他們似乎實現了ti但沒有傳遞完整的路由，我需要。

例如

<NavButton onPress={() => { navigator.push(_getRandomRoute()) }} text="Push"/> 

如果我試圖在我的代碼使用這個（沒有作出反應，本機路由器），即也

<TouchableHighlight onPress={() => { this.props.navigator.push({ name:"myComponent", component:myComponent }) }} /> 

它的錯誤。

這是爲什麼？這是導航器的限制嗎？這是我的代碼錯誤嗎？

使用TabBar和Navigator的Boiler plate應用程序可能對學習很有幫助。 NavigatorIOS對於定製有一點限制。

Answer 1

看來我的錯誤是做循環依賴。

爲了防止它我LazyLoaded我需要填充導航器的類。而不是全部在js文件頂部「要求」它們（是的，忽略你所做的所有教程）。相反，要求他們使用它們的功能。這消除了循環依賴性，並允許您重用這些類。

例如而不是這樣的：

var myClass = require('./MyClass'); 
... 
(some other code) 
... 
render: function(){ 
    return(
     <TouchableHighlight onPress={() => {this.props.toRoute({name: "myPage", component: myClass, data: "SomeData" })}> 
      <Text>Link</Text> 
     </TouchableHighlight> 
    ); 
} 

做到這一點：

goToMyRoute: function(myParameter){ 
    var myClass = require('./MyClass'); 
    this.props.toRoute({name: "myPage", component: myClass, data: myParameter }) 
} 

render: function(){ 
    return(
     <TouchableHighlight onPress={() => {this.goToMyRoute("SomeData")} }> 
      <Text>Link</Text> 
     </TouchableHighlight> 
    ); 
}