Javascript 从根组件响应本机访问函数

在我的React原生应用程序中，我目前正在开发一个定制的toast。我的应用程序的根目录是我的toast组件。我希望能够在我的应用程序中的任何位置调用此特定组件

callToast（）

函数。我试图设置一个存储此根组件的ref的上下文，然后通过我应用程序中任何位置的消费者访问该上下文，但它不起作用。我的第一次迭代如下所示：

应用程序/根屏幕

export const ToastContext = React.createContext()

export const useToast = () => {
   return ToastContext.toastRef;
};


state = {
        ref : null
    };

this.setState（{ref:r}）}/>

我的吐司组件

import React, {useRef, useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet, Dimensions, Image, TouchableOpacity, Animated
} from 'react-native';


const {width, height} = Dimensions.get('window')

const HEIGHT_OF_TOAST = 60
let TOAST_REF;

export const Toast = ({}) => {

  const animate = useRef(new Animated.Value(0)).current
  const animateInOut = animate.interpolate({
    inputRange : [0,1],
    outputRange : [-(HEIGHT_OF_TOAST + 10), 30]
  })
  const callToast = () => {
    Animated.timing(animate, {
      toValue : 1,
      duration : 200
    }).start()
  }

  return (
    <Animated.View style = {[styles.shadow,
        {position : 'absolute', opacity : animate, bottom : animateInOut, right : 20, borderRadius : 12, left : 20,
          backgroundColor : "#fff", height : HEIGHT_OF_TOAST}]}>
      <Text>Toast</Text>
    </Animated.View>

  )
}


const styles = StyleSheet.create({
  shadow : {
    shadowColor: "#333",
    shadowOffset: {
        width: 0,
        height: 4,
    },
    shadowOpacity: 0.4,
    shadowRadius: 7.2,

    elevation: 9,
  }
})

import React，{useRef，useState，useffect}来自'React'；
进口{
看法
文本，
样式表、尺寸、图像、可触摸不透明度、动画
}从“反应本机”；
const{width，height}=Dimensions.get（'window'）
const HEIGHT_OF_TOAST=60
让我们举杯；
导出常量Toast=（{}）=>{
const animate=useRef（新的动画.Value（0））.current
常量animateInOut=设置动画({
输入范围：[0,1]，
输出范围：[-（土司的高度+10），30]
})
常量callToast=（）=>{
动画。计时（动画{
toValue:1，
持续时间：200
}).start（）
}
返回(
干杯
)
}
const styles=StyleSheet.create({
影子：{
阴影颜色：“333”，
阴影偏移：{
宽度：0，
身高：4，
},
阴影不透明度：0.4，
阴影半径：7.2，
立面图：9，
}
})

我试图称自己为吐司的虚拟组件

//At start of component
const toast = useToast()


<TouchableOpacity onPress = {() => toast.callToast()}>
              <Text>Test Toast</Text>
            </TouchableOpacity>

//在组件的开头
const toast=useToost（）
toast.callToast（）}>
烤面包片

尝试执行此操作时，我得到一个错误：undefined不是计算toast.callToast的对象

当从contexts使用者使用它时，我得到一个context.value是undefined错误。 我们将非常感谢您提供的任何帮助，或是公开某种功能的最佳实践

//At start of component
const toast = useToast()


<TouchableOpacity onPress = {() => toast.callToast()}>
              <Text>Test Toast</Text>
            </TouchableOpacity>