react navigation中使用goBack返回指定頁面
阿新 • • 發佈:2019-02-18
goBack
goBack的引數為頁面的key, 這個key是系統隨機分配的, 而不是手動設定的routeName, 所以引數填routeName無法跳轉, goBack如果不帶引數(即key為undefined)會返回上一個頁面, 這個引數key不是目標頁面的key, 而是可以在key為undefined時goBack到目標頁面的那個頁面的key. 如果key為null, 那麼會回到任何地方.
如果有 A -> B -> C -> D 四個頁面,
如果想從D回到B, 在react navigation不整合Redux的情況下, 需要在C通過this.props.navigation.state.key
拿到C的key, 然後把C的key傳入到D中, 然後在D中執行this.props.navigation.goBack("C頁面的key")
就可回到B頁面.
顯然這樣不太方便, 所以最好將Redux整合到react navigation中(react navigaiton官網中有整合方法,在這我就不贅述了).
集成了redux後, 可以在connect中拿到所有載入過的頁面的route, 如:
class ResetPassword extends Component {
...
render() {
const { routes } = this.props;
console.log(routes);
return (
...
)
}
}
export default connect (
(state) => ({
routes: state.nav.routes
})
)(ResetPassword)
為什麼不使用navigate返回?
使用navigate()方法返回頁面會使StackNavigator的結構亂掉, 導致跳轉到目標頁面後, 對頁面元件的重新渲染會出問題.