1. 程式人生 > >react navigation中使用goBack返回指定頁面

react navigation中使用goBack返回指定頁面

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的結構亂掉, 導致跳轉到目標頁面後, 對頁面元件的重新渲染會出問題.