StackNavigationスタックに画面を追加しないReact Native

Question

私は現在の画面の流れを持っています。

ホーム - >情報 - >ログイン - >カメラ。

問題は、ログインをスタックに追加したくないということです。なぜなら、カメラから戻ると、情報ではなくログインに戻るからです。

カメラからthis.props.navigate('Info')を使用した場合、問題は、情報が原因ではなくカメラに戻ることです。注記ここでリセット機能で見たように、ログインページでスタックの削除を完了したくない場合もあります（https://reactnavigation.org/docs/navigators/navigation-actions#Reset）。

は、理想的には私がやりたいものを次のようになります。

ホーム - >情報 - >ログイン（スタックに追加されていない） - >カメラ。

これは、カメラから情報、情報からホームに戻ることができます。

誰もがこの周りに良い方法を見つけましたか？

あなたが唯一のログインページを捨て、スタック全体とのparamsを保持する場合のおかげ

Answer 1

は、その後、あなたはどちらかのカメラのページでReset Navigation Actionを使用することができます。

import { NavigationActions } from 'react-navigation' 

const resetAction = NavigationActions.reset({ 
    index: 1, 
    actions: [ 
    NavigationActions.navigate({ routeName: 'Home', params: this.props.navigation.state.params }) 
    NavigationActions.navigate({ routeName: 'Info', params: this.props.navigation.state.params }) 
    ] 
}) 
this.props.navigation.dispatch(resetAction) 

必要になります。この方法：

1. [ホーム]ページの上にある[情報]ページに移動します。これは、[戻る]ボタンが[ホーム]ページにつながることを意味します。
2. 必要に応じて、パラメータを保持します。あなたがそれらを渡すだけではない場合。

この機能は、コンポーネント内/アクションクリエイター内部/戻るボタン内のどこにでも追加できます。

[戻る]ボタンと同じコードを追加します。この場合、あなたはカメラルートのnavigationOptionsにこれを追加する必要があります。

const backButton = ({ navigation }) => ({ 
     headerLeft: <TouchableOpacity 
        onPress={() => { 
        // the code from above, except for import line and using navigation.whatever instead of this.props.navigation.whatever 
        }} 
       ><Text>Back</Text> // this is a text of a back button, you could also use an icon 
       </TouchableOpacity> 
}); 

ナビゲーター：

const MyStack = StackNavigator({ 
    home: { screen: Home }, 
    info: { screen: Info }, 
    login: { screen: Login }, 
    camera: { screen: Camera }, navigationOptions: backButton });