RN开发-Navigator

　　1、在入口组件render方法中返回<Navigator>
           let defaultName = 'Welcome';
           let defaultCompenent = Welcome;
           <Navigator
               initialRoute={{name:defaultName,component:defaultCompenent}}
               /*configureScene={
                   (route) => {
                       //页面转跳动画 node_modules/react-native/Libraries/CustomComponent/navigate/
                       return Navigator.SceneConfig.VerticalDownSwipeJump;
                   }
               }*/
               renderScene={
                   (route,navigator)=>{
                       let Component = route.component;
                       return <Component {...route.params} navigator={navigator}></Component>;
                   }
               }
           />
       2、在Welcom组件的点击事件中修改转跳页面信息并添加参数
           pressButton(){
               const {navigator} = this.props;
               const self = this;
               /* 上文中，<Component {...route.params} navigator={navigator} 中传递了navigator作为props */
               if(navigator){
                   navigator.push({
                       name: 'Detail',
                       component: Detail,
                       params:{
                           author:this.state.author,
                           user:this.props.user,
                           getResult: function(res){
                               self.setState({
                                   result:res
                               })
                           }
                       }
                   })
               }
           }
       3、在Detail组件中携带参数返回
           (1)、接收参数
               //生命周期方法
               componentDidMount(){
                   this.setState({
                       author:this.props.author,
                       user:this.props.user
                   });
               }
           (2)、携带参数返回
               backButton(){
                   const {navigator} = this.props;

                   if(this.props.getResult){
                       let result = USER_MODELS[1];
                       this.props.getResult(result);
                   }

                   if(navigator){
                       // 入栈出栈，把当前页面pop掉
                       navigator.pop();
                   }
               }

巴特西

RN开发-Navigator

最新文章

热门文章