在父组件中调用子组件中的方法
forwardRef 作用就是在函数组件中，将
在父组件中创建的ref传递给子组件，在父组件中通过ref可以调用子组件的方法。比如调用TextInput、ScrollView等本身带有的方法
useImperativeHandle 给当前的ref绑定方法（可以是父组件传递的，也可以是子组件自己创建的）
方法1：再父组件中创建 ref，传递到子组件
父组件
export default NewsPage = ({navigation}) => {
// 在父组件中创建ref
const contentRef = useRef()
function onClick(){
//可以直接调用TextInpu的方法
contentRef.current.focus()
contentRef.current.abc()
// contentRef.current.scrollTo()
}
return <MainView style={styles.mainView}>
<NewContent ref={contentRef}/> // 传递给子组件
</MainView>
}
子组件
export default NewContent = forwardRef((props,ref) => {
useImperativeHandle(ref,()=>({
abc:()=>{
}
}))
return <View style={styles.topScroll}>
<TextInput ref={ref} .../>
/*<ScrollView ref={ref} .../>*/
</ScrollView>
</View>
})
方法2：再子组件中创建 ref，回传到父组件
子组件
export default NewContent =({onBackRef}) => {
// 创建ref
const tRef = useRef()
useEffect(()=>{
onBackRef(tRef) // 回传给父组件
},[])
useImperativeHandle(tRef,()=>({
abc:()=>{
}
}))
return <View style={styles.topScroll}>
<TextInput ref={tRef} .../>
</View>
}
父组件
export default NewsPage = ({navigation}) => {
return <MainView style={styles.mainView}>
<NewContent onBackRef ={(ref)=>{
ref.abc() // 在此调用子组件的方法
}}/>
</MainView>
}
