深度导航，无需实例化中间组件

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)

但有一个问题。我不想呈现列表。详细信息页面将根据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 });
  }
  // ...
}