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);
goBack()
のkey
プロパティは、新しいルートに移動するたびにreact-navigation
によって作成される動的に作成される文字列です。
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>
);
}
これを行う正しい方法は、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);
これが正しい方法です。
Reactナビゲーション2以降では、次を使用できます。
this.props.navigation.dispatch(NavigationActions.back())
また、すべてのスタックナビゲーターで言及することを忘れないでください
initialRouteName: 'Posts'
新しいバージョンのreact-navtigationでは、次のようにStackActions
を使用できます。
import { StackActions } from "react-navigation";
const popAction = StackActions.pop({n: 1});
this.props.navigation.dispatch(popAction);
これにより、親画面に戻ります
一般的に、次の2つのコマンドを使用できます
this.props.navigation.goBack()
this.props.navigation.dispatch(NavigationActions.back())
別の場合には2つのコマンドを使用する必要があります。
その場合、ボトムナビゲーターの1つのタブに画面が表示されます。したがって、任意のタブのナビゲーションと別のタブのナビゲーションの間で、2番目のコマンドを使用できます。