Передача данных между двумя компонентами в React Native

У меня есть компонент, который инкапсулирует три компонента, один из них - DrawerLayoutAndroid. Теперь я хочу передать ссылку на выдвижной ящик из компонента выдвижного ящика в основной компонент, а затем передать ее компоненту заголовка, чтобы я мог запускать его из компонента заголовка.

Понятия не имею, как это сделать.

Вот главный компонент case.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Header from '@components/header';
import BottomBar from '@components/bottom-bar';
import SideBar from '@components/drawer';

export default class Cases extends Component {

  state = {
    title : 'Cases'
  }

  change_text = () => {

    this.setState({ title : 'Test' })

  }

  open_drawer = (ref) => {

    ref.openDrawer();

  }

  close_drawer = (ref) => {

    ref.closeDrawer();

  }

  render() {

    return (

      <SideBar style = { styles.container }>

        <Header title = { this.state.title } change_text = { this.change_text } open = { this.state.side_bar } />

        <View style = { styles.body }>

          <Text style = { styles.text }> { this.state.name } </Text>

          <TouchableOpacity onPress = { () => this.change_text() } style = { styles.button }>

            <Text> Change State </Text>

          </TouchableOpacity>

        </View>

        <BottomBar ref = { this.state.side_bar } />

      </SideBar>

    )

  }

}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    flexDirection: 'column',
  },
  body : {
    flex : 1,
    backgroundColor: '#ccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text : {
    color : '#fff'
  },
  button : {
    backgroundColor : '#eee',
    paddingVertical: 5,
    paddingHorizontal: 10
  }
})

Вот мой заголовок:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Header extends Component {

  change_text = () => {

    this.props.change_text();

  }

  open = ()

  render () {

    return (

      <LinearGradient start = {{x: 0, y: 0}} end = {{x: 1, y: 0}} colors = {['#a4d294', '#3ac6f3']} style = { styles.header }>

          <TouchableOpacity onPress = { () => this.props.change_text() }>

            <Image source = { require('@media/images/add.png') } style = { styles.add_button } />

          </TouchableOpacity>

          <Text style = { styles.title }> { this.props.title } </Text>

          <TouchableOpacity onPress = { () => this.props.open() }>

            <Image source = { require('@media/images/more.png') } style = { styles.more_button } />

          </TouchableOpacity>

      </LinearGradient>

    )

  }

}

const styles = StyleSheet.create({
  header : {
    height: 70,
    backgroundColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  title : {
    color : '#fff',
    textAlign: 'center',
    fontSize: 20,
    letterSpacing: 3
  },
  add_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  },
  more_button : {
    width: 30,
    height: 30,
    marginHorizontal: 10
  }
})

А вот и мой drawer.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import DrawerLayoutAndroid from 'DrawerLayoutAndroid';
import LinearGradient from 'react-native-linear-gradient';

export default class Drawer extends Component {

  render () {

    const NavigationMenu = (
      <LinearGradient start = {{x: 0, y: 0}} end = {{x: 0, y: 1}} colors = {['#a4d294', '#3ac6f3']} style = {{ flex: 1 }}>
        <View style = {{ flex : 6, justifyContent: 'center' }}>
          <Text>He There</Text>
        </View>
      </LinearGradient>
    )

    return (

      <DrawerLayoutAndroid
        drawerWidth = {250}
        drawerPosition = { DrawerLayoutAndroid.positions.Right }
        renderNavigationView = { () => NavigationMenu }
        ref = { (drawer) => this.props.ref = drawer }
      >

        { this.props.children }

      </DrawerLayoutAndroid>

    )

  }

}