React Native - 導航器更改路由

我正在使用呈現新聞帖子的導航器對象。React Native - 導航器更改路由

想法是，您正在查看單個新聞文章，並且您可以左右滑動查看下一篇文章和上一篇文章。例如，當您向右滑動時，會滑入下一篇文章。我想要的是當我滑動到下一篇文章時，我想再次加載該文章的下一篇文章，以便您可以繼續滑動。

我給這些道具：

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 
}

所以現在的問題是，我該如何正確看待這一點？我做錯了什麼，我如何確保我可以繼續在列表中滑動？

來源

2015-06-30 Timon

如何在設置所有道具後在導航器上運行「forceUpdate」？這應該做的伎倆（理論上它應該在所有場景中調用渲染方法）。

順便說一句。我認爲這不是使用導航器進行你想做的最好的方式 - 因爲它沒有正確使用Navigator的內置狀態。

如果要始終保持呈現3個（目前，上一個，下一個），我認爲更好的解決辦法可能是使用replaceAtIndex(route, index)方法，甚至immediatelyResetRouteStack(routeStack)時，應適當修改狀態導航，讓它相應地呈現。在這種情況下避免動畫可能會有一個困難（我不確定是否ImmediateResetRouteStack會導致動畫）。也許你還需要jumpTo(route)以及重置後，以便沒有動畫觸發。

如果您已經在另一方面限制職位的最大數量在同一時間，你就可以讓他們所有的渲染，那麼你不需要做任何魔法，你只需要做push(route)任何新帖然後jumpBack()立即 - 它應該可能工作。

來源

2015-06-30 10:31:53

向前滑動完成後，將會觸發didFocus回調。然後，您可以使用navigator.replaceAtIndex(nextRoute, this.state.routes.length)爲下一個場景注入路線。

來源

2015-07-02 18:10:55

React Native - 導航器更改路由

回答

相關問題