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

goBack

首先, 现在看一下react navigation官网中对goBack的描述:

goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所以参数填routeName无法跳转, goBack如果不带参数(即key为undefined)会返回上一个页面, 这个参数key不是目标页面的key, 而是可以在key为undefined时goBack到目标页面的那个页面的key. 如果key为null, 那么会回到任何地方.

可以结合下面链接中的Answer理解:
https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working

如果有 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的结构乱掉, 导致跳转到目标页面后, 对页面组件的重新渲染会出问题.