React native 如何在React本机函数组件中从父组件调用子函数？

您好，我想从App.js调用AddModalBox.js中的showModal（），方法是使用useRef（）将AddModalBox.js访问到App.js中，但它不起作用。它说： showmodal.showMdal（）不是函数。。。 谢谢你的帮助。。。 App.Js

    import React ,{useRef,useState} from 'react'
    import {View,Text,StyleSheet,Image,Button,FlatList, Alert } from 'react-native'
    import data from './components/Data'
    import Swipeout from 'react-native-swipeout'

    import AddModalBox from './components/AddModalBox'

    const App=()=>{
      const showmodal =useRef()
      const  callModal=()=>{
        showmodal.showModal()
      }
      return(          
        <>
         <View style={{backgroundColor:'red',height:10,flex:1,flexDirection:'row',marginTop:10}}>
          <View style={{flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
            <Button title="+" onPress={callModal}/>
          </View>
        </View>
        <FlatList data={data} renderItem={({item,index})=> <Mydata item={item} index={index} parentFlatList={refreshFlatList}/>}
        keyExtractor={item=>item.id}

        /> 
        <AddModalBox ref={showmodal}/>
    </>
      )
    }

    export default App;

import React，{useRef，useState}来自“React”
从“react native”导入{视图、文本、样式表、图像、按钮、平面列表、警报}
从“./components/data”导入数据
从“反应本机Swipeout”导入Swipeout
从“./components/AddModalBox”导入AddModalBox
常量应用=（）=>{
const showmodal=useRef（）
常量callModal=（）=>{
showmodal.showmodal（）
}
报税表（
}
keyExtractor={item=>item.id}
/> 
)
}
导出默认应用程序；

AddModalBox.js 我想从App.js调用showmodel（）函数

import React,{useRef}from 'react'
import {Text,View,Button,Dimensions} from 'react-native'
import Modal from 'react-native-modalbox'
import { useState } from 'react'
//import data from './components/Data'

var screen=Dimensions.get('window')

const AddModalBox=(props)=>{
    let isOpen=false

         // I want call this function in App.js
    const showModal=()=>{
        isOpen=true
    }
    return(
        <>
        <Modal  style={{width:screen.width-80,height:200,justifyContent:'center'}}
        position='center'
        backdrop={true}
        onClosed={()=>isOpen=false}
        ref={show}
        isOpen={isOpen}
        >
        <Text>hello from modal</Text>
        </Modal>
        </>
    )
}

export default AddModalBox;

import React，{useRef}来自“React”
从“react native”导入{文本、视图、按钮、维度}
从“react native modalbox”导入模态
从“react”导入{useState}
//从“./components/data”导入数据
var screen=Dimensions.get（'窗口'）
const AddModalBox=（道具）=>{
设isOpen=false
//我想在App.js中调用此函数
常量showModal=（）=>{
等参=真
}
返回(
isOpen=false}
ref={show}
isOpen={isOpen}
>
莫代尔你好
)
}
导出默认AddModalBox；

让我向您展示一个在子组件和父组件之间使用参数的示例。 本例是关于变量可见性的，但您可以查看并获得用于代码的洞察力：

//Parent component
    class Parent extends Component {
        state = {
          viewClhild: false
        }

        goToChild = (task) => {    
            this.setState({viewChild: true})
        }

        onShowClhildChange(viewChild) {
            this.setState({ viewChild });
          }

        render() {
            <View>
                {
                    this.state.viewChild 
                      ? <ChildScreen onShowClhildChange={this.onShowClhildChange.bind(this)} /> 
                      : <Text>Show Parent</Text>
                  }
                <Button 
                    onPress={() => {this.goToChild()}}
                >
                    <Text style={button.text}>Entrar</Text>
                </Button>
            </View>
        }

    }


    //Child Component
    class ChildScreen extends Component {
        isChildVisible = (isVisible) => {
            this.setState({ viewChild: isVisible })
            if (this.props.onShowClhildChange) {
               this.props.onShowClhildChange(isVisible);
            }
          }
          constructor (props) {
            super(props);

            this.state = {
              viewChild: this.props.viewChild
            }
          }

          render() {
            return (
              <View>
                <Button 
                  onPress={() => this.isChildVisible(false)}
                >
                  <Text>CLOSE CHILD SCREEN</Text>
                </Button>
            </View>
            )
        }
    }

//父组件
类父级扩展组件{
状态={
viewClhild:错误
}
goToChild=（任务）=>{
this.setState（{viewChild:true}）
}
onShowClhildChange（视图孩子）{
this.setState（{viewChild}）；
}
render（）{
{
this.state.viewChild
?  
：显示父项
}
{this.goToChild（）}}
>
诱捕者
}
}
//子组件
类ChildScreen扩展组件{
isChildVisible=（isVisible）=>{
this.setState（{viewChild:isVisible}）
如果（此.props.onshowchildchange）{
此.props.onshowchildchange（可见）；
}
}
建造师（道具）{
超级（道具）；
此.state={
viewChild:this.props.viewChild
}
}
render（）{
返回(
这个.isChildVisible（false）}
>
关闭子屏幕
)
}
}

非常感谢您的重播，我知道如何在课堂上使用它。。但是我想使用函数组件。我认为它是不同的。您可以指定代码片段中使用的语言来改进语法highlinting-请参阅更多：我理解。但我认为功能组件没有这种行为。你认为如何在课堂上使用它？这是不可能的吗？是的，这是可能的，我是在课堂上做的。但我想用功能组件来学习它。如果我发现了如何做到这一点，我会和你谈谈。=）