美文网首页
react native 组件跳转带参数

react native 组件跳转带参数

作者: 麦子_FE | 来源:发表于2016-10-17 10:14 被阅读906次

    最近开发react native项目,组件跳转带参数可以有两种做法

    首先先罗列navigator对象包括的方法

    push(route)——导航到一个新的路线

    pop()——返回一个页面

    popN(n)——一次返回 N 页。当 N=1 时,该行为相当于pop()

    replace(route)——取代当前页面的路线,并立即为新路线加载视图

    replacePrevious(route)——取代前一页的路线/视图

    replacePreviousAndPop(route)——取代了以前的路线/视图并转换回去

    resetTo(route)——取代顶级的项目并 popToTop

    popToRoute(route)——为特定的路线对象回到项目

    popToTop()——回到顶级项目

    关于组件参数传递

    1.使用push跳转组件:传递的时候就是直接的组件跳转带props

    demo:

    /**

    * 跳转到 选择类型

    * @param name 名称

    * @param type 跳转效果

    */

    selectType(name,type){

    this.props.navigator.push({

    name:"SelectType",//跳转的组件名称

    passProps:{

    name:name,

    LocalCityName:this.props.LocalCityName,

    LocalProvinceName:this.props.provinceName,

    cityName:this.props.cityName,

    provinceName:this.props.provinceName

    },

    type: 'Right'//跳转动画

    })

    }

    2.如果子组件需要返回父亲组件  可以用过上一个页面的实例或者回调方 法,作为参数传递到当前页面来,在当前页面操作上一个页面的state

    父组件:

    navigator.push({

    name: 'SecondPageComponent',

    component: SecondPageComponent,

    params: {

    id: this.state.id

    getUser: function(user) {//这里是父亲组件传递给子组件的回调函数

    _this.setState({

    user: user

    })

    }

    }

    });

    子组件: 这里可以拿到getUser,getUser指向父组件的传递过来回调函数,这样你通过pop返回到父组件的时候,只要你在子组件修改了user,那么父组件就修改为子组件操作时候的状态了。

    if(this.props.getUser) {

    var user = USER_MODELS[this.props.id];

    this.props.getUser(user);//就是这里使用了父亲组件传递过来的回调函数

    }

    相关文章

      网友评论

          本文标题:react native 组件跳转带参数

          本文链接:https://www.haomeiwen.com/subject/cnvayttx.html