使用 React Native Router Flux 的合成场景堆栈（历史）答案

【问题标题】：Synthetic scene stack (history) with React Native Router Flux使用 React Native Router Flux 的合成场景堆栈（历史）
【发布时间】：2017-05-10 07:07:45
【问题描述】：

有什么方法可以用 React Native Router Flux 综合定义场景堆栈（历史）？假设我有一个应用程序，用户可以自然地从A –> B –> C 导航。我想在场景 C 上启动应用程序，它与自然行为 (A -> B -> C) 具有相同的历史记录，因此用户从最初打开的场景 C 导航回 B。

编辑：我想这应该可以通过使用 Redux Persist 以某种方式实现，但我发现了这个相关的 issue。

【问题讨论】：

您能否确认这是否是应用的第一个屏幕？
是的，C 将是应用程序的第一个屏幕。
这可以通过 ex-navigation 实现，您可以提供一个导航堆栈和堆栈索引以通过 immediateresetstack 方法显示。在反应本机路由器通量中找不到任何这样的东西。
我能想到的一种方法是，使用“react-native-splash-screen”作为应用程序的启动画面。并在 A 的 componentDidMount 内部基于对应用程序启动的一些全局检查，推送 B，类似地在 B 的 componentDidMount 内部基于相同的检查，推送 C。然后您可以删除场景 C 的 componentDidMount 中的启动画面（这个启动库允许您运行启动屏幕后面的应用程序并将其删除到您想要的任何位置）并更改应用程序启动的全局变量，以便当您在应用程序中再次使用它们时它们不会被推送。这对你有用吗？
你试过了吗？

标签： javascript react-native redux persistence react-native-router-flux

【解决方案1】：

我设法用一个假的空初始场景来做到这一点。这是一个非常 hacky 的解决方案，从 C 到 B 的动画仍然无法正常工作。

import React, {Component} from "react";
import {AppRegistry} from "react-native";
import {Scene, Router, Actions, ActionConst} from "react-native-router-flux";
import A from "./A";
import B from "./B";
import C from "./C";

class App extends React.Component {
  componentDidMount() {
    const params = {
      onBack: () => Actions.b({
        direction: 'fade',
        onBack: () => Actions.a({
          direction: 'fade'
        })
      }),
      duration: 0
    };
    Actions.c(params);
  }

  render() {
    return (
        <Router>
          <Scene key="root" style={{paddingTop: 60}}>
            <Scene key="empty"
                   component={class extends Component{render() {return null}}}
                   />
            <Scene key="a" component={A} title='A' type={ActionConst.RESET}/>
            <Scene key="b" component={B} title='B'/>
            <Scene key="c" component={C} title='C'/>
          </Scene>
        </Router>
    )
  }
}

AppRegistry.registerComponent('untitled', () => App);

【讨论】：