Question

我正在尝试使用side menu来推动应用导航。我希望它与TabBarIOS的工作方式类似，我可以为每个导航项删除内容，然后在用户导航后再次点击同一项时调用它们。

目前，每次用户点击该导航项时都会重新加载内容。我可以在离开之前妥善保存这个状态。我试图复制它，但这没有用。

e.g。

_onNavClick: function(clickedItem){
    if (clickedItem == this.state.currentSideNavID){
        // close menu without changing page
    }else{
        snapShots[this.state.currentSideNavID] =this.state.currentView;

        if (snapShots[clickedItem] != undefined){
            // load saved snapshot
            this.setState({
                currentView:snapShots[clickedItem],
            });
        }else{
            switch (clickedItem){
                case "test_page_1":
                    this.setState({
                        currentView : <BlankPage message={this.state.currentSideNavID} style={styles.page} />
                    });
                break;
                case "test_page_2":
                    this.setState({
                        currentView : <TestPage style={styles.page} />
                    });
                break;
            }
        }
    }
}

render: function(){
    return (
        <SideMenu menu={menu}>
            {this.state.currentView}
        </SideMenu>
    );
}

Answer 1

我认为尝试将组件存储在状态是一个非常糟糕的主意并且有龙。

相反，我会在全局级别存储您的整个应用程序状态，包括子视图所需的任何信息（以及他们的孩子），因此它与这些特定视图无关在内存中显示/维护。

作为优化，请删除SideMenu的责任，即将这些组件传递给其状态，而不是从全局存储中检索它。

方便的是，后者正是像Redux这样的图书馆要解决的问题，同时强调前者是一种良好的做法。

很抱歉以这样的方式“回答”你的问题，但我不认为你想要实现的是你所建构的方式。

React-Native：如何对某些东西进行快照以保持其完整状态

1 个答案: