[英]How do I prevent the screen from scrolling to x:0, y:0 when an input loses focus?
I'm of aware of this:https://github.com/APSL/react-native-keyboard-aware-scroll-view &我知道这一点:https ://github.com/APSL/react-native-keyboard-aware-scroll-view &
import { KeyboardAvoidingView } from "react-native";
but I don't think I'm doing something right.但我认为我做的不对。
The code below is an example of one of the many forms on the application.下面的代码是应用程序中众多表单之一的示例。 The issue is when the user deselects an input field, the screen jumps all the way to the top of the form.
问题是当用户取消选择输入字段时,屏幕会一直跳到表单的顶部。
Imagine filling out a form with 10 inputs and every time you were done with a field, the screen jumps to the top.想象一下用 10 个输入填写一个表单,每次完成一个字段时,屏幕都会跳到顶部。 That's poor UX and I'm trying to prevent that from happening.
这是糟糕的用户体验,我正在努力防止这种情况发生。
I'm using redux-form and native-base.我正在使用 redux-form 和 native-base。
(I have a switch in the sidebar which toggles a boolean. If it's true, then input will display what's stored in its auto_fill prop. This has nothing to do with the issue, just a little bit of context to understand the code better.) (我在侧边栏中有一个开关可以切换布尔值。如果为真,则输入将显示存储在其 auto_fill 道具中的内容。这与问题无关,只是一点上下文可以更好地理解代码。)
<Form>
<Field
label="Address *"
name="address"
component={SmartInput}
auto_fill={side_bar_switch ? "182 Blink" : null}
validate={
side_bar_switch ? null : [required, minLength1, maxLength100]
}
/>
<Field
label="City *"
name="city"
component={SmartInput}
auto_fill={side_bar_switch ? "Los Angeles" : null}
validate={
side_bar_switch ? null : [required, minLength1, maxLength30]
}
/>
<Field
label="Apt Number"
name="apt"
component={SmartInput}
auto_fill={side_bar_switch ? "5" : null}
validate={side_bar_switch ? null : [maxLength5]}
/>
<Field
label="ZIP code *"
name="zipcode"
component={SmartInput}
auto_fill={side_bar_switch ? "90210" : null}
validate={
side_bar_switch ? null : [required, number, maxLength5]
}
/>
<Field
label="State *"
name="state"
component={SmartInput}
auto_fill={side_bar_switch ? "CALIFORNIA" : null}
validate={side_bar_switch ? null : [required]}
/>
<Field
label="Phone Number *"
name="phoneNumber"
component={SmartInput}
auto_fill={side_bar_switch ? "2816769900" : null}
validate={side_bar_switch ? null : [required, phoneNumber]}
/>
<Field
label="Email *"
name="app_email"
component={SmartInput}
auto_fill={side_bar_switch ? "threadpool.io@x_x.com" : null}
validate={
side_bar_switch ? null : [required, email, maxLength50]
}
/>
</Form>
I have created a component for this use case我为这个用例创建了一个组件
its a wrapper component use this instead of View when playing with TextInput它的包装组件在使用 TextInput 时使用 this 而不是 View
import React, {Component} from "react";
import {
StyleSheet,
KeyboardAvoidingView,
ScrollView,
} from "react-native";
import themeConstants from "../../theme/themeConstants";
class KeyboardAwareScrollView extends Component {
render() {
return (
<ScrollView style={styles.container}>
<KeyboardAvoidingView style={styles.container2} behavior="padding" enabled>
{this.props.children}
</KeyboardAvoidingView>
</ScrollView>
);
}
}
export default KeyboardAwareScrollView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: themeConstants.offWhite
},
container2: {
flex: 1,
justifyContent: "flex-start",
paddingTop: 30,
alignItems: "center",
backgroundColor: themeConstants.offWhite
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.