web-dev-qa-db-ja.com

Reactナビゲーションback（）およびgoBack（）が機能しない

2つの画面に戻ろうとしています。目標は、EditPageからCoverに移行することです。これが私のナビゲーションスタックです。

Main -> Cover -> EditCover -> EditPage

私はドキュメントを読んで、元に戻りたい画面のキーを提供するように言っています、私のコードは次のとおりです：

this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));

私も試しました（運が悪か​​った）：

this.props.navigation.dispatch(NavigationActions.back('EditCover'));
this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));
this.props.navigation.dispatch(NavigationActions.back({routeName: 'EditCover'}));
this.props.navigation.goBack('EditCover');
this.props.navigation.goBack({key: 'EditCover'});
this.props.navigation.goBack({routeName: 'EditCover'});

このすべての面白いところは、エラーが出ないことです。コードが呼び出されても何も起こりません...

追伸1つの画面に戻る場合、このコードは正常に機能します。

this.props.navigation.goBack(null);

追伸誰かが解決策を見つける前にこれに遭遇した場合に備えて。このハックは今のところ動作します：

this.props.navigation.goBack(null);
this.props.navigation.goBack(null);
react-nativereact-navigation
22
Dev01

goBack() のkeyプロパティは、新しいルートに移動するたびにreact-navigationによって作成される動的に作成される文字列です。

例えば： - enter image description here

this.props.navigation.state.key に保存されます。

したがって、EditPageからCoverに移動するには、EditCoverのキーをEditPageに渡し、そのキーでgoBack()を呼び出す必要があります。 。

なぜCoverではなくEditCoverのキーではないのですか？

反応ナビゲーションはメソッド goBack(key) のみを提供するため、キーから戻るではなく、キーから戻るです。

オプションで、戻るルートを指定するキーを提供します。デフォルトでは、goBackは呼び出し元のルートを閉じます。何が閉じられるかを指定せずにどこかに戻ることを目標とする場合、.goBack（null）;を呼び出します。

EditCover.js

render() {
    const { state, navigate } = this.props.navigation;    

    return (
        <View>
            <Button title="Go to Page" onPress={ () => {
                /* pass key down to *EditPage* */
                navigate('EditPage', { go_back_key: state.key });
            }} />
        </View>
    );
}

EditPage.js

render() {
    const { state, goBack } = this.props.navigation;    
    const params = state.params || {};

    return (
        <View>
            <Button title="Back to Cover" onPress={ () => {
                /* go back from *EditCover* to *Cover* */
                goBack(params.go_back_key);
            }} />
        </View>
    );
}
37
Val

これを行う正しい方法は、StackNavigationを使用することです。

const AppNavigator = createStackNavigator({
    Main: {screen: MainScreen},
    Cover: {screen: CoverScreen},
    EditCover: {screen: EditCoverScreen},
    EditPage: {screen: EditPageScreen},
}, {
    initialRouteName: 'Main'
});

class App extends React.Component {
    render() {
        return <AppNavigator/>;
    }
}

あなたの質問によると、これは画面ナビゲーションの順序なので、goBack（null）の場合

EditPage（goBack）-> EditCover（goBack）-> Cover（goBack）->メイン

コンポーネントでgoBack（null）を呼び出す必要があります。

this.props.navigation.goBack(null);

これが正しい方法です。

11
Ninja Coding

Reactナビゲーション2以降では、次を使用できます。

this.props.navigation.dispatch(NavigationActions.back())

また、すべてのスタックナビゲーターで言及することを忘れないでください

initialRouteName: 'Posts'
4
Rajesh Nasit

新しいバージョンのreact-navtigationでは、次のようにStackActionsを使用できます。

 import { StackActions } from "react-navigation";

 const popAction = StackActions.pop({n: 1});
 this.props.navigation.dispatch(popAction);

これにより、親画面に戻ります

3
Hussam Kurd

一般的に、次の2つのコマンドを使用できます

  1. this.props.navigation.goBack()
  2. this.props.navigation.dispatch(NavigationActions.back())

別の場合には2つのコマンドを使用する必要があります。

  • スタックナビゲーターが1つだけのプロジェクトで役立つ最初のコマンド
  • ボトムナビゲータで役立つ2番目のコマンド。

その場合、ボトムナビゲーターの1つのタブに画面が表示されます。したがって、任意のタブのナビゲーションと別のタブのナビゲーションの間で、2番目のコマンドを使用できます。

1
LeeHayng