React導航 - 在受保護視圖的不同StackNavigators之間導航

對不起，如果有明顯的解決方案，但我沒有找到反應導航的文檔非常清楚，這是令人沮喪的，因爲它現在被呈現爲官方反應本地導航庫。React導航 - 在受保護視圖的不同StackNavigators之間導航

在我的索引文件中，我調用asynstorage來檢索登錄時生成的訪問令牌。然後，我想要返回一個受保護的堆棧，如果登錄或歡迎堆棧如果沒有。

render() { 
if (this.state.isLoggedin === true) { 
    return <Protected />; 
} 
else { 
    return <Root />; 
} 

}

這裏是我的路由器

export const Root = StackNavigator({ 
Welcome: { screen: Welcome }, 
Login: { screen: Login }, 
Register: { screen: Register } 
}); 

export const Protected = StackNavigator({ 
Conversations: { screen: Conversations } 
});

當我重新加載應用程序這是工作。我不明白的是如何在按下時從「根」導航到「受保護」，我不希望這些路由在同一個StackNavigator中。有沒有辦法做到這一點，或者我需要改變整個結構，並且在一個stacknavigator下同時擁有Root和Protected？

再次對不起，如果這是顯而易見的，但我已經建立了一個聊天應用程序使用反應本機Navigator之前，它已被棄用，並沒有發現它幾乎令人困惑。我覺得應該有更好的文檔和例子來說明如何構建真實世界的應用程序。

來源

2017-08-14 user3010268

，您可以用導航this.props.navigation.navigate（「奧瑟維尤」），例如審覈，旁邊例如navigato到一個頁面聊天 App.js

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
} 

    class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat')} 
      title="Chat with Lucy" 
     /> 
     </View> 
    ); 
    } 
}

這個路線是其他網頁定義了這方面的聊天，其中要導航

const SimpleApp = StackNavigator({ 
     Home: { screen: HomeScreen }, 
     Chat: { screen: ChatScreen }, 
    });

警告如果你正在做一個登錄驗證的課題，正在登錄的用戶後，可以給回並返回到登錄，這將是可取重置路線登錄時

this.navigation.dispatch(NavigationActions.reset(
      { 
       index: 0, 
       actions: [ 
       NavigationActions.navigate({ routeName: 'Home', params: {param: data},}) 
       ] 
      }));

來源

2017-08-14 03:11:18

感謝Martin，我明白我可以在主堆棧導航器中放置根和受保護的視圖，只隱藏後退按鈕，但聽說有關於此操作的Android後退按鈕存在問題，我不認爲我真的瞭解什麼重置正在做，並閱讀一些關於它的github問題，所以想看看是否有更好的方法。我希望我可以做一些像'this.navigation.navigate（受保護）'或'this.navigation.navigate（Conversations）'從根，但我想這不可能 – user3010268

我完全同意你的觀點，React Navigation的文檔可能會很混亂。 Unforutnately Navigators不提供直接的方式將道具傳遞給子組件。對於這種情況，您不幸需要使用逃生艙口，基本上是一個通用模塊，它允許您將部件彼此連接。不要建議你自己編寫這個複雜的組件，我強烈建議使用redux。即使它需要一些樣板，但它可以讓你將所有組件連接到相同的狀態，所以在你的主要組件類中，當Login或Register組件使用redux動作改變它時，isLoggedIn變量會立即改變。我建議閱讀一下redux文檔並開始使用它。你基本上創建一個只有用戶認證的redux商店，然後從那裏開始。

來源

2017-08-14 03:39:28

謝謝艾哈邁德是的我想使用REDX時事情變得更加複雜，但我想我現在應該實施它，這聽起來像是一個很好的解決方案，因爲生病最可能最終需要它。謝謝！ – user3010268

React導航 - 在受保護視圖的不同StackNavigators之間導航

回答

相關問題