react native 组件传递

一、父组件直接调用子组件方法、

1.初始化一个ref对象

import React, { useRef } from 'react'; 

const childRef = useRef(null)

2.父组件内使用childRef

const ParentConponent= ({ navigation }) => {

 const triggerEvent= () => {

       if (childRef.current) {

      // 调用子组件有一个名为 toggle的方法用于触发内部事件

      childRef.current.toggle();

  }

  return (

     <BottomDrawer ref={childRef}></BottomDrawer>

    <button onPress={triggerEvent} >触发调用子组件的方法事件</button>

  )

}

3.子组件使用useImperativeHandle,forwardRef方法，创建一个自定义hook来处理ref的传递和暴露组件的自定义方法

import React, { useImperativeHandle,forwardRef  } from 'react';

import {  Text, TouchableOpacity} from 'react-native';

4.子组件

const ChildConponent=  (props,ref) => {

const toggle = () => {

   console.log('这里可以写组件自己的方法')

  };

        useImperativeHandle(ref, () => ({

    // 暴露一个子组件方法给父组件  

    toggle,

    }));

return(

  <TouchableOpacity onPress={toggle}> <Text>组件内容</Text></TouchableOpacity>

)

}

export default forwardRef(ChildConponent);

二、父组件子组件向父组件传值

1.父组件定义方法

<ChildConponent sendMessage={sendMessage}></ChildConponent>

const sendMessage = (t =>{

      console.log('wo这是接收的值', t))

    })

2.子组件传递值

const ChildConponent=  ({sendMessage) => {

return(

  <TouchableOpacity onPress={()=>sendMessage('我传的值')}> <Text>组件内容</Text></TouchableOpacity>

)

}

export default ChildConponent