Question

我正在使用呈现新闻帖子的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
}

所以问题是，我该如何正确处理？我做错了什么，如何确保我可以继续刷卡？

Answer 1

如何运行＆＃34; forceUpdate＆＃34;在设置所有道具后导航器上？这应该做的伎俩（理论上它应该在所有场景上调用渲染方法）。

顺便说一句。我认为这不是使用导航器的最佳方式 - 因为它没有正确使用Navigator的内置状态。

如果您总是希望保留3个帖子（当前，上一个，下一个），我认为更好的解决方案可能是使用replaceAtIndex(route, index)方法甚至immediatelyResetRouteStack(routeStack)，它应该正确修改导航器的状态并让它相应地渲染。一个困难可能是在这种情况下避免动画（我不确定immediateResetRouteStack是否会导致动画）。也许在重置后你也需要jumpTo(route)，这样就不会触发动画。

如果一方面一次有限的最大帖子数量，并且你可以将它们全部渲染，那么你不需要做任何魔术，你只需要做push(route)任何新帖子，然后立即jumpBack() - 它应该可以工作。

Answer 2

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

React Native - 导航器更改路线

2 个答案: