React Native - Navigator Yinelemeli Çocuklar Çöküyor

Question

React-Native uygulamasında navigator bileşenine bakıyorum ancak yığınta bulunan bir çocuk düğümünü kabul edemiyorum. Örneğin. Örneğin facebook uygulamasını ele alırsak. Bir kullanıcı bir kullanıcıyı arayabilir, ardından arkadaşları tıklayabilir ve ardından başka bir kullanıcıyı tıklayabilir. Ben şu anda Tepki-Yerli-Router standart gezgin aracılığıyla bu denenmiş ve adres

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

hatasıyla yığına doğru eklemeye çalıştığınızda Bu çöküyor. Bu

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

Bu süresiz kadar uzun bir sınıfını yeniden kullanmak asla olarak çalışmaya alabilirsiniz gibi Benim şu anki kod görünüyor. Yaptığım an, hatayı alıyorum.

Araştırmaya bağlantılar gönderirim ancak Navigator için (NavigatorIOS'dan ziyade) Çerçeve ile ilgili örnekler haricinde fazla bir şey yoktur ve ti'ye ulaşmak için tam bir rotaya ihtiyaç duymadan ulaşırlar. .

örn.

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

benim kodunda bu kullanmayı denerseniz (olmadan Tepki-Yerli-Yönlendirici) yani

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

o hataları da.

Bu neden? Bu bir Navigator sınırlaması mı? Kodumda bir hata mı var?

TabBar ve Navigator kullanan bir Kazan plakası uygulamasının öğrenilmesi oldukça yararlı olabilirdi. NavigatorIOS özelleştirme için biraz sınırlıdır.

Answer 1

Görünüşe göre hatam döngüsel bağımlılık ile ilgiliydi.

Bunu önlemek için Gezgini doldurmak için gereken sınıfları yükledim. Bunların hepsini js dosyalarının üst kısmında “gerektiren” bir battaniye yerine (evet, yaptığınız tüm dersleri yoksayın). Bunun yerine bunları kullanacak işlevlerde onları gerektirir. Bu döngüsel bağımlılığı kaldırır ve sınıfları yeniden kullanmanıza izin verir.

örn. Bu yerine:

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

bunu:

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