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

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 会从服务器获取所有的项目，这是没有意义和浪费的。

我需要详细信息上的后退按钮才能工作，这意味着返回列表。有没有办法将 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 });
  }
  // ...
}