React Native-如何自动将ScrollView滚动到光标位置？

Question

如果我有一个ScrollView，并且在其中ScrollView中有很多TextInput，那么当用户点击{{ 1}}并开始输入？

每当用户输入内容并且光标经过ScrollView的可见部分时，滚动TextInput即可使用户看到光标。

我该怎么做？

Answer 1

在研究这个之后，我可能有一个可能的解决方案。 scrollTo() 有一个 ScrollView 方法，可用于滚动到屏幕上的特定位置。还有一个 measure() 方法可用于确定组件在屏幕上的位置。因此，您可以在 textInput 时获取 onFocus 组件的位置并触发一个函数，然后调用 scrollTo() 的 ScrollView 方法。

我还没有尝试过，所以不能 100% 确定这一点。

资源： How to get the position of a component on screen in react native? https://reactnative.dev/docs/scrollview#scrollto

Answer 2

使用参考文献

我注意到了一些变通方法，例如提供组件的绝对坐标，然后在设备之间调整子组件的功能和相应坐标。这是一个临时修复，并不是真正可取的。这就是 references 出现的时候。

<Component
    ref={ref => {
      this.compRef = ref;
    }}
/>

一旦您为特定组件分配了 ref，您就可以使用 react-native 的 scrollTo() https://reactnative.dev/docs/scrollview#scrollto 来调用 UI 中的滚动事件。

this.compRef.scrollTo({
    //...props here
});

如果使用功能组件，请利用 useRef() https://reactjs.org/docs/hooks-reference.html#useeffect 钩子传递引用并将它们用于滚动。

为了交付生产就绪代码，始终建议使用深层链接。有关如何使用引用以及如何将它们与 scrollTo() 中的 scrollView 函数连接的详细信息，请在此处找到示例：https://arsfutura.com/magazine/deep-linking-in-react-native-scroll-to-element/

来源：https://arsfutura.com/magazine/deep-linking-in-react-native-scroll-to-element/