如何向下滚动到有焦点的文本输入？

Posted 2023-02-24

【中文标题】如何向下滚动到有焦点的文本输入？

【英文标题】：How can I scroll down to a focused text input?

【发布时间】：2019-02-23 00:40:17

【问题描述】：

我想弄清楚如何向上/向下滚动到最近关注的输入。 我正在使用这个文本输入 -> https://facebook.github.io/react-native/docs/textinput

这是文本输入：

           <TextInput
              autoFocus
              style=PassengersStyles.SearchBox
              onChangeText=text => searchParamActionHandler(text)
              value=searchParam
              placeholder="Search..."
              autoCapitalize="none"
              ref=this.searchRef
            />

这是一个隐藏的文本输入，它有autoFocus，所以当输入显示时，它会立即聚焦，但手机屏幕/UI 保持在同一位置。我需要一旦输入焦点屏幕滚动到输入，以便用户能够看到 UI 中有一个新元素。

有什么想法吗？

【问题讨论】：

添加一些显示文本输入的父（或封闭标签）的代码会有所帮助。

【参考方案1】：

如果您的内容超出屏幕高度，您可能会缺少<ScrollView>。

您可能还需要一个KeyboardAvoidingView，以确保TextInput 没有被键盘覆盖（或隐藏）。

这里我添加了几个<View>的来模拟一些内容。

import React from "react";
import 
  StyleSheet,
  View,
  TextInput,
  ScrollView,
  KeyboardAvoidingView
 from "react-native";

export default class App extends React.Component 
  render() 
    return (
      <KeyboardAvoidingView behavior="padding">
        <ScrollView>
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <TextInput
            autoFocus
            placeholder="Textinput far below..."
            style= height: 20, backgroundColor: "red" 
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
          <View
            style=
              height: 100,
              width: 100,
              backgroundColor: "rgba(0, 0, 0, 0.3)"
            
          />
        </ScrollView>
      </KeyboardAvoidingView>
    );