#概要
普段は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