热门搜索 :
考研考公
您的当前位置:首页正文

react native界面传参和方法回调

来源:东饰资讯网

界面传参数用到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 =       
              {    
     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界面了。

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

Top