javascript - 如何防止屏幕滚动到 x :0, y :0 when an input loses focus?

Question

我知道这一点: https://github.com/APSL/react-native-keyboard-aware-scroll-view &

import { KeyboardAvoidingView } from "react-native";

但我认为我做的事情不对。

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

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

我正在使用 redux-form 和 native-base。

(我在边栏中有一个切换 bool 值的开关。如果它是真的，那么输入将显示存储在它的 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>

Answer 1

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

它的包装器组件在使用 TextInput 时使用它而不是 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
},
});