React Native 經過Navigator正反向傳參和跳轉思路

場景：從A頁面跳轉到B頁面，從A頁面傳參數到B頁面再從B頁面返回並回傳參數。

1.在入口文件定義Navigator：引入A頁面，配置屬性：默認首頁(參數可自定義) initialRoute={{name:"a",component:A}};配置跳轉的動畫效果configureScene={(route)=>{return Navigator.SceneConfigs.VerticalDownSwipeJump}}，這個route是跳轉目標的路由對象即前面初始化路由的對象;導航路徑，可爲導航提供路由，renderScene{（route,navigator）=>{let tar = route.component; return <tar {...route.params} navigator={navigator}},這裏的tar是路由的目標組件，"...route.params"便可把當前也頁面的參數push到下個頁面，navigator={navigator}便可把導航看成屬性傳過去下個頁面。

 

正向傳參：

2.在A頁面引入B頁面，構造屬性id，等會傳給B頁面，在觸發導航的組建裏獲取navigator傳過來的屬性： const {navigator}= this.props ; if (navigator) {navigator.push({id:123})}；

3.在B頁面設置構造屬性id，經過componentDidMount(){this.state({id:this.props.id})}獲取到A頁面傳來的id

 

反向傳參：

4.在A頁面增長屬性back，push給B頁面時多加個方法供B回調，方法裏getBack：function（gg）{_this.setState({getBack:gg})};

在B頁面回調，在觸發返回的方法裏，if（this.porps.getBack）{this.props.getBack(‘要回傳的數據’)}，而後經過navigator.pop,返回去