React Native - 导航器更改路线

Posted 2023-03-15

【中文标题】React Native - 导航器更改路线

【英文标题】：React Native - Navigator change routes

【发布时间】：2015-06-30 08:35:05

【问题描述】：

我正在使用呈现新闻帖子的 Navigator 对象。

这个想法是您正在查看单个新闻帖子，您可以左右滑动查看下一个和上一个帖子。例如，当您向右滑动时，它会滑动到下一个帖子。我想要的是当我滑动到下一个帖子时，我想再次加载该帖子的下一个帖子，这样你就可以继续滑动。

我给这些道具：

getInitialState: function() 
  return 
    post: ,
    routes: [this.props.prevPost, this.props.post, this.props.nextPost],
    startRoute: this.props.post,
  ;

我的导航器功能如下所示：

render: function() 
  var self = this;
  return (
    <Navigator
      debugOverlay=false
      ref=(navigator) => 
        this._navigator = navigator;
      
      onDidFocus=this.itemChangedFocus
      initialRoute=this.state.startRoute
      initialRouteStack=this.state.routes
      routeStack=this.state.routes
      renderScene=this.renderNewsItem
      configureScene=() => (
        ...Navigator.SceneConfigs.HorizontalSwipeJump,
      ) />
  );

所以我的想法是onDidFocus，我查看我当前的帖子，然后抓取上一个和下一个帖子并以某种方式（这就是我卡住的地方）触发导航器组件的重新渲染？

这就是我的 itemChangedFocus 函数的样子：

// Route gives the current news item which has the focus
itemChangedFocus: function(route) 
  // PostStore returns a posts array
  // posts[0] = previousPost, posts[1] = currentPost, posts[2] = nextPost
  let posts = PostStore.getPrevAndNextPost(route);
  // This is probably wrong, but it did replace the nextPost in the route object
  this.props.navigator.route.nextPost = posts[2];
  // Now I need to trigger a rerender? I tried it with setState but that didn't work

所以问题是，我该如何正确处理这个问题？我做错了什么？如何确保我可以继续在列表中滑动？

【参考方案1】：

设置完所有道具后在导航器上运行“forceUpdate”怎么样？这应该可以解决问题（理论上它应该在所有场景上调用渲染方法）。

顺便说一句。我认为这不是将 navigator 用于您想要做的事情的最佳方式 - 因为它没有正确使用 Navigator 的内置状态。

如果你总是想保持 3 个帖子呈现（当前、上一个、下一个）我认为更好的解决方案可能是使用 replaceAtIndex(route, index) 方法甚至 immediatelyResetRouteStack(routeStack)，它应该正确修改导航器的状态并让它呈现因此。在这种情况下，一个困难可能是避免动画（我不确定是否立即ResetRouteStack 会导致动画）。也许您还需要在重置后jumpTo(route)，以免触发动画。

另一方面，如果您一次限制了帖子的最大数量，并且您将能够保持它们全部呈现，那么您不需要做任何魔术，您只需为任何新的帖子做push(route)发布，然后立即jumpBack() - 它应该可以工作。

【参考方案2】：

向前滑动完成后，didFocus 回调将触发。然后就可以使用navigator.replaceAtIndex(nextRoute, this.state.routes.length)为下一个场景注入路由了。