Текстовый компонент перекрывается с представлением над ним

Question

Я практикую некоторый реагирующий нативный код, и в настоящее время у меня возникла проблема с перекрытием. У меня есть этот пользовательский компонент:

const MobileNumberInput = ({ value, valueChanged, placeholder, valid }) => {
  return (
    <View style={{ flexDirection: "row", flex: 1 }}>
      <TextInput
        editable={false}
        style={[styles.textBoxCountryCode, !valid ? styles.invalidTextBox : ""]}
        value="+90"
      />
      <TextInput
        style={[styles.textBoxPhoneNumber, !valid ? styles.invalidTextBox : ""]}
        placeholder={placeholder}
        value={value}
        onChangeText={valueChanged}
        keyboardType="number-pad"
        maxLength={9}
      />
    </View>
  );
};
export default MobileNumberInput;

onst styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flex: 1,
    height: 40
  },
  textBoxCountryCode: {
    height: 40,
    borderColor: "gray",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderLeftWidth: 1,
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    padding: 5,
    flex: 2
  },
  textBoxPhoneNumber: {
    height: 40,
    borderColor: "gray",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderRightWidth: 1,
    borderTopRightRadius: 5,
    borderBottomRightRadius: 5,
    paddingTop: 5,
    paddingRight: 5,
    paddingBottom: 5,
    marginBottom: 10,
    flex: 11
  },
  invalidTextBox: {
    borderColor: "red"
  }
});

И здесь я использую этот компонент:

renderError = id => {
    const { validationErrors } = this.state;
    if (validationErrors[id]) {
      return (
        <Text style={styles.validationError}>{validationErrors[id][0]}</Text>
      );
    }
    return null;
  };
  render() {
    const keyboardVerticalOffset = Platform.OS === "ios" ? 40 : 0;
    return (
      <View style={styles.container}>
        <KeyboardAvoidingView
          behavior="padding"
          style={styles.textBoxContainerContainer}
          keyboardVerticalOffset={keyboardVerticalOffset}
        >
          <View style={styles.textBoxContainer}>
            <TextBoxMA
              style={styles.textBox}
              placeholder={Strings.USERNAME_PLACEHOLDER}
              value={this.state.userName}
              onChangeText={this.handleTextChange("userName")}
              valid={this.fieldIsValid("userName")}
            />
            {this.renderError("userName")}
          </View>
          <View style={styles.textBoxContainer}>
            <MobileNumberInput
              value={this.state.originalMobile}
              valueChanged={this.handleTextChange("originalMobile")}
              placeholder={Strings.ORIGINAL_MOBILE_PHONE_PLACEHOLDER}
              valid={this.fieldIsValid("originalMobile")}
            />
            {this.renderError("originalMobile")}
          </View>
        </KeyboardAvoidingView>
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20
  },
  textBoxContainerContainer: {
    flex: 4,
    justifyContent: "flex-end"
  },
  textBoxContainer: {
    height: 40,
    marginBottom: 20
  },
  validationError: {
    fontSize: 12,
    color: "red",
    fontWeight: "bold",
    paddingTop: 3
  }
});

Часть {this.renderError("originalMobile")} отвечает за отрисовку текста ошибки. Я положил его туда, чтобы получить маленькое красное предупреждение прямо под текстовым полем. Но предупреждение распространяется на внутренний номер мобильного телефона, в то время как предупреждение имени пользователя отображается правильно. Вот вывод:

Я пытался обернуть текст ошибки внутри другого представления, не помогло. Обернут контейнерное представление внутри компонента MobileNumberInput в еще одно представление с явным flex-direction = "column". Это тоже не помогло. Я даже изменил flex-direction этого контейнера View на «column», чтобы посмотреть, что произойдет. Но это тоже не имело никакого эффекта. Как видно на скриншоте, проблема в компоненте MobileNumberInput. Текст ошибки для имени пользователя textinput в порядке.

И если вам интересно, как выглядит TextBoxMA, это просто компонент TextInput с предопределенными свойствами. Вот оно:

export const TextBoxMA = props => {
  return (
    <TextInput
      secureTextEntry={props.isPassword || false}
      {...props}
      style={[
        props.style,
        styles.textBox,
        Platform.OS === "ios" ? styles.textBoxIos : styles.textBoxAndroid,
        !props.valid ? styles.invalidTextBox : ""
      ]}
    />
  );
};
const styles = StyleSheet.create({
  textBox: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    borderRadius: 5,
    padding: 5
  },
  invalidTextBox: {
    borderColor: "red"
  }
});

Answer 1

Вы установили в качестве высоты ввода значение 40, но затем в представлении со стилем styles.textBoxContainer, который включает и ввод, и текст ошибки, также установлено значение 40 высоты, что приводит к уменьшению MobileNumberInput пополам. Вы не можете визуально заметить этот эффект, потому что TextInputs внутри MobileNumberInput выходят за пределы родительского

Для обработки подобных случаев вам нужно создать один контейнер для переноса TextInputs и другой контейнер для переноса первого контейнера и текста ошибки. Лучше не устанавливать явную высоту для контейнеров, а устанавливать их отступы для получения желаемого размера