iOS 显示键盘时，本机基础输入会滚动（隐藏）

Question

我使用来自 native-base (v2) 的输入组件。当用户聚焦输入时，值会滚开。文本光标也消失了。

InputField.js

const InputField = ({
  style,
  iconStyle,
  labelStyle,
  type,
  value,
  disabled,
  label,
  placeholder,
  onChangeText,
}) => {
  return (
    <Item style={[style]}>
      <Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
      <Label style={[labelStyle]}>{label}</Label>
      <Content
        contentContainerStyle={{
          flexDirection: "row",
          alignItems: "center",
        }}
      >
        <Input
          value={value}
          disabled={disabled}
          autoCompleteType={type.autoCompleteType}
          autoCorrect={type.autoCorrect}
          autoCapitalize={type.autoCapitalize}
          keyboardType={type.keyboardType}
          onChangeText={onChangeText}
          secureTextEntry={type.secureTextEntry}
          maxLength={type.maxLength}
          placeholder={placeholder}
        />
      </Content>
    </Item>
  );
};

Profile.jsx

<InputField
                style={{ flex: 1, flexDirection: "row" }}
                labelStyle={{ flex: 1 }}
                type={InputFieldTypes.City}
                value={city}
                label={I18n.t("profile.city") + ":"}
                onChangeText={(text) => {
                  setCity(text);
                  setEdit(true);
                }}
              />

我遇到的行为。 iOs

我已经尝试给它更多 space 以查看发生了什么，但它仍然滚出视野。 Android 看起来不错。从输入中删除填充和边距没有效果。也没有强迫它只有一行。

Answer 1

我发现问题是由内容组件引起的。只需删除它即可解决问题。

const InputField = ({
  style,
  iconStyle,
  labelStyle,
  type,
  value,
  disabled,
  label,
  placeholder,
  onChangeText,
}) => {
  return (
    <Item style={[style]}>
      <Icon style={[iconStyle]} active name={type.icon} type={type.iconType} />
      <Label style={[labelStyle]}>{label}</Label>
      
        <Input
          value={value}
          disabled={disabled}
          autoCompleteType={type.autoCompleteType}
          autoCorrect={type.autoCorrect}
          autoCapitalize={type.autoCapitalize}
          keyboardType={type.keyboardType}
          onChangeText={onChangeText}
          secureTextEntry={type.secureTextEntry}
          maxLength={type.maxLength}
          placeholder={placeholder}
        />

    </Item>
  );
};

iOS 显示键盘时，本机基础输入会滚动（隐藏）

On iOS native-base input scrolls away(hiding) when keyboard is shown

javascript

input

react-native

native-base

expo