美文网首页
react native界面传参和方法回调

react native界面传参和方法回调

作者: DSperson | 来源:发表于2016-04-29 14:59 被阅读3383次

    界面传参数用到Navigator(下面用Nav代替)
    一,A界面->B界面,既A传个ID到B。
    Nav 有个属性renderScene 回调方法有两个参数route和navigator。
    A界面:

     <Navigator ref='navigator' 
                 initialRoute={{ name:'login' , component: defaultComponent }}    
                 configureScene={() => {return Navigator.SceneConfigs.FloatFromRight;}}      
                 renderScene={(route, navigator) => {let Component = route.component;      
                 if(route.component) {    
         return <Component {...route.params} navigator={navigator} route={route} />}        
    }}/>
    

    //注释
    initialRoute为默认的名字和界面。
    configureScene 跳转动画
    {...route.params} 将params这个对象属性打开,类似遍历后变成key value键值对只不过会在props中
    之后 只要写

    const {navigator}=this.props;
    if (navigator) {
         navigator.push({name:'BookStore',   
         component: BookStore,      
         params: { ID:'可以了'}   
     });}
    

    //注释
    name 就是定义的名字,
    component 为B界面的引用
    params 为传的参数 '可以了'
    下个界面用this.props.ID
    B界面:

    constructor(props){
           super (props)
           console.log(this.props.ID)
    }
    

    二,方法回掉
    比如说A界面push到B界面处理完数据点击重新刷新A界面。
    A界面:

    const {navigator}=this.props;
    if (navigator) {
         navigator.push({name:'BookStore',   
         component: BookStore,      
         params: {loadAView:()=>this._loadView()}   
     });}
    
    _loadView() {
               '处理数据'
    }
    

    B界面
    点击调用

    if (this.props.loadAView) {
           if (this.props.loadAView('你的参数可以不带参数'))
    }
    

    这时候返回过去就会刷新A界面了。

    参考老大方法,加深了认识。

    相关文章

      网友评论

          本文标题:react native界面传参和方法回调

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