React Native - Navigator 递归子项崩溃

Question

我正在查看 React-Native 中的导航器组件，但无法让它接受已在堆栈中的子节点。例如。如果我们以 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>
        );
    }
}

只要我从不重复使用 class，我就可以无限期地使用它。我这样做的那一刻，我得到了错误。

我会 post 链接到研究但是 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

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

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

React Native - Navigator 递归子项崩溃

React Native - Navigator Recursive Children Crashes

navigator

ios

react-native