ios - React Native - Navigator 递归子项崩溃

Question

我正在查看 React-Native 中的导航器组件，但无法让它接受已在堆栈中的子节点。例如。如果我们以 facebook 应用程序为例。用户可以搜索用户，然后单击 friend ，然后单击另一个用户。当我尝试将它添加到错误的堆栈时，这会崩溃

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)除了框架中包含的示异常(exception)没有太多内容，它们似乎实现了 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

看来我的错误与循环依赖有关。

为了防止它，我延迟加载了填充导航器所需的类。而不是在 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>
    );
}