React Native 不建议使用 TextInput 发送电子邮件

Question

React Native 不会在登录表单上建议新用户常用的电子邮件地址。 LoginForm.js 和 Email.js 可以正常运行，但它不提供当前用户常用的电子邮件地址。我没有使用 firebase、google 签名或 facebook 签名，例如类似的库，所以我需要一些内置的 React Native 功能，让我的用户可以更轻松地登录、注册。

登录表单.js

....

<Email
    placeholder={i18n.t("i18n_email")}
    value={this.state.email}
    onChangeText={email => this.validate({ email })}
    autoCorrect={true}
    autoCapitalize="none"
    autoCompleteType="email"/>

....

在 Email.js 上

import React from "react";
import { Text, TextInput, View, StyleSheet } from "react-native";

const styles = StyleSheet.create ({
  inputStyle: {
    zIndex: 1,
    position: 'absolute',

  },
  labelStyle: {
    fontSize: 18,
    paddingLeft: 20
  },
  containerStyle: {
    height: 50,
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    width: '100%'
  }
});

const Email = ({
  value,
  onChangeText,
  placeholder,
  keyboardType,
  autoCompleteType,
  autoCapitalize
}) => {
  const { inputStyle, labelStyle, containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <TextInput
        placeholder={placeholder}
        value={value}
        onChangeText={onChangeText}
        autoCapitalize={autoCapitalize}
        autoCompleteType={autoCompleteType}
        style={styles.inputStyle}
      />
    </View>
  );
};

export { Email };

Answer 1

我使用这个代码。它适用于 iOS 和 Android。

<TextInput
   testID="LoginEmailAddress"
   textContentType="emailAddress"
   keyboardType="email-address"
   style={commonStyles.textInput}
/>

Answer 2

对于 React Native

V0.72

，您可以使用

inputMode = 'email'

获取带有

@

符号的电子邮件布局键盘。

<TextInput
  inputMode="email"
  ...
/>

Answer 3

看起来您的 <TextInput> 上缺少

textContentType

属性。

Answer 4

谢谢，你帮我完成了我的项目：https://github.com/huanghanzhilian/c-shopping-rn