我正在尝试找出如何向上/向下滚动到最近关注的输入。 我正在使用此文本输入-> 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中有一个新元素。
有什么想法吗?
答案 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>
);
}
}