如何向下滚动到重点文字输入?

时间:2019-02-23 00:40:17

标签: javascript reactjs react-native ecmascript-6

我正在尝试找出如何向上/向下滚动到最近关注的输入。 我正在使用此文本输入-> 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 个答案:

答案 0 :(得分:0)

如果您的内容超出屏幕高度,则可能会缺少<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>
    );
  }
}

InputScroll