当输入失去焦点时，如何防止屏幕滚动到x:0，y:0

Question

我知道这一点：https://github.com/apsl/reaeact-native-keyboard-aware-scroll-view＆amp;

import { KeyboardAvoidingView } from "react-native";

，但我认为我做得不对。

以下代码是应用程序上众多形式之一的示例。问题是当用户取消选择输入字段时，屏幕会一直跳到表单的顶部。

想象一下，用10个输入填写表格，每次您完成一个字段时，屏幕都会跳到顶部。那是糟糕的UX，我正在努力防止这种情况发生。

我正在使用redux-form和本机基础。

（我在侧边栏中有一个开关，可以切换一个布尔值。如果是真的，则输入将显示存储在其auto_fill Prop中的内容。这与问题无关，只有一点上下文可以理解代码更好。）

<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>

Answer 1

我已经为此用例创建了一个组件

它的包装器组件在使用textInput

时使用它而不是视图

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