深度导航而不实例化中间组件

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

我需要使用Detail上的Back按钮才能工作，这意味着返回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 });
  }
  // ...
}