react-native 在组件之间的通信，怎么使用带参函数

根据上面的UI展示和点击效果显示，对应源码如下：

import React, { Component } from "react";
import { StyleSheet, View, Animated, Image, Easing, Text } from "react-native";
import { Button } from "react-native-elements";
import { ToastComponent } from "react-native-pickers";
import CustomerViewComponent from "./src/CustomerViewComponent";
const arraysNum = [{ key: "1" }, { key: "2" }, { key: "3" }];
export default class App extends React.Component {
  render() {
    return (
      
        
        {arraysNum.map((item, index) => (
          
        ))}

         (this.ToastComponent = ref)} />
      
    );
  }

  ///点击按钮 —— 响应弹窗
  itemClick = num => {
    this.ToastComponent.show("Num值=" + num);
  };
}

///自定义组件 —— 按钮
const CustomerView = props => {
  return (
    
      
    
  );
};

//@mark style
const styles = StyleSheet.create({
  AnimatedDeomo: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

函数使用方式 : 分析内部自定义组件与父组件通信携带参数

且看源码中第36行，属于组件内部自定义组件CustomerView(自定义无状态值的View)作为子View使用。（上图中蓝色边框的view按钮）点击弹出Num值=1，Num值=2，Num值=3 的toast样式内容。且看按钮Button中第50行onPress={props.itemClick.bind(null, props.Num)} 使用了bind函数方式作为按钮的点击响应方法。然后父组件使用子组件在第16-22行。父组件响应子组件点击响应的属性方法是在第20行，然后通过箭头函数承接函数的回调 —— this.itemClick。这个时候就会出现每点击一次蓝色边框的按钮就会弹出toast 内容是 Num值=数字的格式。

仔细观察会发现，第30行的箭头函数有一个参数num 。每次点击蓝色边框的按钮就会弹出toast，且动态变化内容就是 参数num 。说明num只是变化的。结合第50行和第19行，不难看出动态变化值num，是父组件向自组件以props属性的方式传递过去的。然后再结合第50行、20行和30行代码看，父组件把num值从父组件传递到自组件，然后自组件通过方法又回调到父组件中。最终弹出显示！

通过这个过程提出一个疑问！！
子组件与父组件通信，在父组件中使用回调，子组件通过回调方法可以向父组件传值。那么，传值的方式有哪些？？怎么进行传值呢？
其实这里我总结到的有种方式。

• 1，this.props.方法名
• 2，()=>{this.props.方法名(参数)}
• 3，props.方法名.bind(null, 参数)
  其中第一种无法从子组件向父组件传递参数。第二种和第三种可以由子组件向父组件传递参数。
  

对应，父组件承接回调也有对应的3种通用方式。

• 1，this.方法名 即 (需要定义箭头函数)
• 2，()=>{…} 即 (直接箭头函数)
• 3，this.方法名.bind(this, 参数) 即 （bind函数）
  

函数使用方式 : 外部自定义组件与父组件通信时携带参数

外部自定义组件与父组件通信与自组件使用方式基本一直，只是在引用使用上稍有区别。拆开上述源码来看，并与内部自组件与父组件（携带参数）通信方式做对比。

对比结果是，使用基本是一致的！