Question

在此库中：https://github.com/wix/react-native-keyboard-aware-scrollview

从自述文件（ TextInput组件的自动滚动部分）引用的这两行代码中，父组件可以使用回调ref技术获得子代的ref数组：

<KeyboardAwareScrollView 
    style={styles.container} 
    getTextInputRefs={() => { return [this._textInputRef];}}
>
    <TextInput 
        style={styles.textInput} 
        placeholder={'My Input'} 
        ref={(r) => { this._textInputRef = r; }}
    />

</KeyboardAwareScrollView>

getTextInputRefs是一个回调，您可以在其中返回对滚动视图内的子TextInput组件的引用的数组。

但是，据我了解，在功能组件中没有像this._textInputRef这样的东西。在父级滚动视图和子级输入是功能组件的情况下，我该怎么做？

不必以这个为例，但是使用它会很棒。

感谢任何概念证明。

Answer 1

这是在功能组件中使用引用的示例。

const MyComponent = () => {
  const textRef = React.useRef();

  return (
    <KeyboardAwareScrollView getTextInpurRefs={() => [textRef]}>
      <TextInput ref={textRef} />
    </KeyboardAwareScrollView>
  )
}

Answer 2

您可以使用useRef hook。

例如：

export default () => {
    const textInputRef = React.useRef(null);
    return (
        <KeyboardAwareScrollView 
            style={styles.container} 
            getTextInputRefs={() => { return [textInputRef];}}
        >
            <TextInput 
                style={styles.textInput} 
                placeholder={'My Input'} 
                ref={textInputRef}
            />
        </KeyboardAwareScrollView>
    );
}

React / React Native：如何在功能组件中使用回调ref？

2 个答案: