Как я могу прокрутить вниз до сфокусированного ввода текста?

Question

Я пытаюсь выяснить, как я могу прокрутить вверх / вниз к недавно сфокусированному вводу.Я использую этот текстовый ввод -> 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, поэтому при вводе отображается, он сразу же фокусируется, но экран телефона / пользовательский интерфейс остается в том же положении.Мне нужно, чтобы после того, как ввод был сфокусирован, экран прокручивался до ввода, чтобы пользователь мог видеть, что в пользовательском интерфейсе появился новый элемент.

Есть идеи?

Answer 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>
    );
  }
}