Question

我正在查看React-Native中的navigator组件，但无法接受已经在堆栈中的子节点。例如。如果我们以facebook应用程序为例。用户可以搜索用户，然后单击“朋友”，然后单击其他用户。当我尝试使用错误

将其添加到堆栈时，这会崩溃

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

我通过标准导航器和当前的React-Native-Router尝试过此操作。我目前的代码看起来像这样

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

只要我从不重复使用课程，我就能无限期地工作。我做的那一刻，我得到了错误。

我会发布链接到研究，但除了框架中包含的样本之外，导航器（而不是NavigatorIOS）的数量并不多，他们似乎实现了ti，但没有通过我需要的完整路径。

e.g。

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

如果我尝试在我的代码中使用它（没有React-Native-Router），即

$('#creatorSearchMain').on("click", '.followButton', function() { 
    #code in here
});

它也有错误。

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

使用TabBar和Navigator的Boiler plate应用程序可能非常有用。 NavigatorIOS对定制有点限制。

Answer 1

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

为了防止它，我LazyLoaded我需要填充导航器的类。而不是毯子“要求”它们都在js文件的顶部（是的，忽略你已经完成的所有教程）。而是在要使用它们的函数中要求它们。这将删除循环依赖性，并允许您重用这些类。

e.g。而不是这个：

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 - 导航器递归儿童崩溃

1 个答案: