使用Form组件报错：Element type无效，期望字符串却得到undefined

看起来你遇到的问题根源在于react-native-elements组件库的版本与你使用的组件名不匹配，导致你导入的FormLabel和FormInput实际上是undefined，触发了那个"Invariant Violation"错误。

问题诊断 #

在react-native-elements v3及以上的版本中，官方对部分组件进行了重命名：

• FormLabel → Label
• FormInput → Input
• FormValidationMessage → HelperText

你当前导入的这几个旧组件名在新版本中已经被移除了，所以当你尝试渲染它们时，React会收到undefined而非有效的组件类型，从而抛出错误。

解决方案 #

你有两种选择来修复这个问题：

方案1：升级代码适配新版本组件名 #

修改你的Login组件中的导入语句和组件使用：

// 替换原来的导入
import { Label, Input, HelperText } from 'react-native-elements';

// 然后在render里替换组件
render() {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./images/logo.png")}></Image>
      <Label style={styles.flex1}>enter Login of your Hotel</Label>
      <Input 
        onChangeText={login => this.checkLogin({login})}
        placeholder='enter your login'
        autoCapitalize = 'none'
      />
    </View>
  );
}

方案2：降级react-native-elements到支持旧组件名的版本 #

如果你不想修改代码，可以降级到v2.x版本（比如2.3.2，这是v2的最后一个稳定版）：

# 使用npm
npm install react-native-elements@2.3.2

# 或者使用yarn
yarn add react-native-elements@2.3.2

降级后，你原来的代码就可以正常运行了。

额外的代码小优化 #

顺便提一下，你的Login组件中constructor里的state初始化有小问题，应该改为：

constructor(props) {
  super(props);
  this.state = { // 要加this.
    login: '',
  };
}

另外，onPress方法如果要正确使用this.props.navigation，需要确保this的绑定正确，比如在constructor里添加：

this.onPress = this.onPress.bind(this);

或者使用箭头函数调用：

<TouchableOpacity onPress={() => this.onPress()}>
  {/* 按钮内容 */}
</TouchableOpacity>

内容的提问来源于stack exchange，提问作者droledenom