react native navigation 参数传递调用

最新推荐文章于 2024-08-20 10:37:05 发布

豆皮青椒

最新推荐文章于 2024-08-20 10:37:05 发布

阅读量3.4k

点赞数

分类专栏： react 文章标签： native react props state params

本文链接：https://blog.csdn.net/u011523180/article/details/73255730

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码分析如下

参数传递分析
CategoryContainer.js中设置参数


onPress={() => {
  navigation.state.params.handleCheck();
}}


Category.js中

if (params === undefined || !params.isFirst) {
  this.props.navigation.setParams({ handleCheck: this.onActionSelected });
}

1、props属性

通过父组件为Child，引用的组件为子组件，如 ChildName和ChildTel
子组件中有属性name 和 tel，那么我们就可以在父组件中
进行 key={value} 的形式设置

class Child extends Component{  
    render(){  
      return(  
          <View>  
              <ChildName name={this.props.ChildName}/>  
              <ChildTel tel={this.props.ChildTel}/>  
         </View>  
       );  
   }  

class ChildName extends Component{  
   render(){  
      return(  
          <Text>{this.props.name}</Text>  
       );  
   }  
}  
class ChildTel extends Component{  
  render(){  
       return(  
          <Text>{this.props.tel}</Text>  
      );  
    }  
}  



}

这里的name和tel是子组件的属性，然后我们用父组件的属性传递给子组件，那么父组件的属性就是ChildName和ChildTel。也就是说我们设置父组件的属性时那么他的子组件props属性也会被赋值。

return (  
           <Child  
               ChildName="小明"  
              ChildTel="18912345678"/>  
    );

2、另一种妙用

<子组件 {...this.props}></子组件>

如下

<Text>{this.props.name}</Text>

这是相当于将父组件拥有的属性传递给子组件

如果父组件有，点击响应，那么子组件也会有
有个例外

This.props.children，这个返回的是组件的所有子节点
是一个数组对象

经典妙用
1.CategoryContainer.js中初始化，中为导航栏右上角点击动作

声明了函数

 navigation.state.params.handleCheck();

声明时候用的是

onPress={() => {
  navigation.state.params.handleCheck();
}}


tabBarIcon: ({ tintColor }) =>
  <Icon name="md-pricetags" size={25} color={tintColor} />,
headerRight: navigation.state.params !== undefined &&
  navigation.state.params.isFirst
  ? null
  : <Icon.Button
      name="md-checkmark"
      backgroundColor="transparent"
      underlayColor="transparent"
      activeOpacity={0.8}
      onPress={() => {
        navigation.state.params.handleCheck();
      }}
    />

2、通过

render() {
  return <Category {...this.props} />;
}

将CategoryContainer.js父控件中的所有属性，当然包括
This.props.navigation 对象

但是对于 navigation对象中的 params下的属性

只能够通过调用 navigation下的 setParams({key:value})的形式进行赋值

3、在Category.js中
首先获取 params，，，然后再进行设置

componentDidMount() {

  const { params } = this.props.navigation.state;
  if (params === undefined || !params.isFirst) {
     this.props.navigation.setParams({ handleCheck: this.onActionSelected });
  }
}

复习一下

Navigation中的变量

(1)This.navigation. goBack()返回上一页

(2)This.navigation state 通过state对象可以获取其内部的
routeName 路由名称, key 界面表示，和 params
其中 params中可以进行变量声明，或者变量定义

(3)This.navigation setParams方法可以对 params中key进行设置value
(4)dispatch 方法，，主要是dispatch一些action以后详述

函数定义方法
onPress = {this.函数名.bind(this)}
onPress={() =>this.函数名()}
或者带参数的 onPress={(参数1,参数2) => this.函数名(参数1，参数2)}
前面的(参数1，参数2)类似函数转接

第三种可以保存函数引用

 constructor(props){  
      super(props);  
      this._onAppPaused = this.onAppPaused.bind(this);  
  }  
onPress={this._onAppPaused}

_onAppPaused  为指向函数的引用

onAppPaused为函数

父子组件同一界面，父声明，传递参数…this.props，子组件定义建立指向关系。

参考
http://blog.csdn.net/superbiglw/article/details/54344032
以及饿了么开源代码分析