react-navigationで同一ページに遷移する

概要

普段はReact NativeでiOSアプリを開発してます

今回は、react-navigationで同一ページ（そのページ内での詳細は別）への遷移をした際に正常に動かせるまでのメモを共有します

現象

ナビゲーターは以下の通り

navigator.js

import Page from "./page.js"
import { createStackNavigator} from "react-navigation";
const Rooter = createStackNavigator({
  Page: {
    screen: Page,
  },

});
export default Router;

アプリ登録は省略します、該当コンポーネントは以下の通り

Page.js

import React, { Component } from 'react';
import {
  TouchableOpacity,
  View,
  } from 'react-native'
class Page extends Component {

  render() {

      return(
        <View>
          <TouchableOpacity onPress={()=>{
             this.props.navigate.navigate("Page")
          }} >
            {"Button"}
          </TouchableOpacity>
        </View>

      );


  }
}
export default Page;

以上2点が主なコードです
ただこの構成ではうまく同一ページに遷移することができません

解決

変更点はPage.jsのみです

Page.js

import React, { Component } from 'react';
import {
  TouchableOpacity,
  View,
  } from 'react-native'
class Page extends Component {

  render() {

      return(
        <View>
          <TouchableOpacity onPress={()=>{
             //this.props.navigate.navigate("Page")
             this.props.navigate.push("Page")
          }} >
            {"Button"}
          </TouchableOpacity>
        </View>

      );


  }
}
export default Page;

navigateをpushにすることで同一ページへの遷移を行わせることが可能になります

参考資料

React Navigation API Reference: Navigator-dependent functions

stackoverflow: Stack same screen multiple times with React Navigation