React Native - 导航器递归儿童崩溃

Question

我正在查看React-Native中的navigator组件,但无法接受已经在堆栈中的子节点.例如,如果我们以Facebook应用程序为例.用户可以搜索用户,然后单击"朋友",然后单击其他用户.当我尝试将错误添加到堆栈时,这会崩溃

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

我通过标准导航器和当前的React-Native-Router尝试了这个.我目前的代码看起来像这样

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"/>

如果我尝试在我的代码中使用它(没有React-Native-Router),即

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

它也错了.

为什么是这样？这是Navigator的限制吗？这是我的代码中的错误吗？

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