ReactNavigation中如何实现页面跳转

Posted 2021-03-07 sna-ling

一、ReactNavigation中如何实现页面跳转

  因为每个屏幕组件(具有路由地址的组件)都是有App根组件自动创建并挂载的，App组件在创建屏幕组建时，会自动传递进来一个props： navigation

  从当前屏幕跳转到其它屏幕：

this.props.navigation.navigate( ‘屏幕地址‘ )

  注意：默认情况下，Image没有onPress事件，如果想被点击实现跳转，需要封装到“触摸反馈组件”，如

<TouchableOpacity onPress={}> 

<Image/>

</TouchableOpacity>

 

3.ReactNavigation中如何实现跳转传参

  回忆：基于浏览器的Web应用中如何传参？

    Angular中：  

路由词典：{path: ‘product/detail/:pid‘, component: ...}

     执行跳转：<a routerLink="product/details/15">

  注意：RN应用根本没有浏览器，没有地址栏，没有/15！

  RN中的路由传参不需要修改路由词典；

  前一个组件跳转时提供路由参数：

this.props.navigation.navigate(‘目标地址‘, {pid:13,age:30})

  后一个组件加载完成时读取路由参数：

this.props.navigation.state.params   ——  {pid:13, age:30}

     或者

     this.props.navigation.getParam(‘pid‘,  99)    //99表示默认参数值