中級コンポーネントをインスタンス化せずに深くナビゲートする

Question

スタックをリセットして、いくつかの手順をナビゲートしたい。このパターンはうまく機能します：

import { NavigationActions } from 'react-navigation' 

const resetAction = NavigationActions.reset({ 
    index: 1, 
    actions: [ 
    NavigationActions.navigate({ routeName: 'List'}), 
    NavigationActions.navigate({ routeName: 'Detail', params: {id: theId}) 
    ] 
}) 
this.props.navigation.dispatch(resetAction) 

問題が1つあります。私はリストをレンダリングしたくありません。詳細ページでは、theIdに基づいてサーバーから項目を取得します。しかし、その前に、リストはサーバーからすべての項目をフェッチしますが、無意味で無駄です。

[詳細]の[戻る]ボタンが機能するには、リストに戻る必要があります。 Listをスタックに入れて、インスタンス化してレンダリングせずにサーバーに余分な負荷をかけることはできませんか？

Answer 1

私が考えることができる最も簡単な解決策は、リクエストまたはレンダリングを行う前に、パラメータをリストコンポーネントに送信し、パラメータをチェックすることです。

例

import { NavigationActions } from 'react-navigation' 

const resetAction = NavigationActions.reset({ 
    index: 1, 
    actions: [ 
    NavigationActions.navigate({ routeName: 'List', params: { reset: true }}), 
    NavigationActions.navigate({ routeName: 'Detail', params: {id: theId}) 
    ] 
}) 
this.props.navigation.dispatch(resetAction) 

---

class List extends Component { 
    // ... 
    componentDidMount() { 
    //example for control 
    let list = []; 

    if(this.props.navigation.state.params.reset !== true) { 
     // populate list 
    } 
    this.setState({ list }); 
    } 
    // ... 
}