react-navigationで同一ページに遷移する
6820 ワード
概要
普段は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
Author And Source
この問題について(react-navigationで同一ページに遷移する), 我々は、より多くの情報をここで見つけました https://qiita.com/VerfolgungEin/items/222d318969f07731f5d7著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .