Question

我正在寻找一种方法来进行反应导航，以便在触发下一步之前调度导航动作并等待它完全完成。

类似的东西：

<div id="chartdiv_refinance"></div>
<script src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js"></script>

<script>
var chart1 = AmCharts.makeChart("chartdiv_refinance", {
    "theme": "none",
    "type": "serial",
    "dataProvider": [{
        "type": "text1",
        "label1": var1,
        "label2": var2
    }],
    "valueAxes": [{
        "unit": "text2",
        "position": "left",
        "title": "",
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "text3",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "text4",
        "type": "column",
        "valueField": "text5",
    }, {
        "balloonText": "text6",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "text7",
        "type": "column",
        "clustered":false,
        "columnWidth":0.5,
        "valueField": "text8",
    }],
    "plotAreaFillAlphas": 0.1,
    "categoryField": "type",
    "categoryAxis": {
        "gridPosition": "start"
    },
    "export": {
        "enabled": true
     }
});

目前我正在使用setTimeout解决方法。

Answer 1

与react-navigation没有特别的关系，但仍然有用：来自react-native的 InteractionManager API。

有一个方法 runAfterInteractions（），它将在所有动画完成后调用，因此在导航的情况下我发现它是一个方便的工具。例如，您可以这样做：

class Main extends Component {

    componentDidMount() {
        // 1: Component has been mounted off-screen
        InteractionManager.runAfterInteractions(() => {
            // 2: Component is done animating
            // 3: Do your anotherAction dispatch() here
        }); 
    }
}

Answer 2

也许你可以订阅react-navigation的reactFocus事件来触发第二个动作。

在这里阅读： https://reactnavigation.org/docs/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

等待反应 - 导航过渡完成

2 个答案: