不变违规：元素类型无效：预期为字符串或类/函数，但得到：未定义。

Question

开发人员

救命。 我在下面收到此错误，我一直在尝试查找问题，但是却看不到它！ 怎么了 它似乎源于从146到236的代码。

不变违规：元素类型无效：预期为字符串（对于内置>组件）或类/函数（对于复合组件），但得到：> undefined。 您可能忘记了从定义其的文件中导出组件，或者可能混淆了默认导入和命名导入。

import React, { Component } from "react";
import PropTypes from "prop-types";
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  LayoutAnimation,
  UIManager,
  Dimensions
} from "react-native";
import { Button, Input } from "react-native-elements";

import Icon from "react-native-vector-icons/FontAwesome";
import SimpleIcon from "react-native-vector-icons/SimpleLineIcons";

const SCREEN_WIDTH = Dimensions.get("window").width;

// Enable LayoutAnimation on Android
UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

const TabSelector = ({ selected }) => {
  return (
    <View style={styles.selectorContainer}>
      <View style={selected && styles.selected} />
    </View>
  );
};

TabSelector.propTypes = {
  selected: PropTypes.bool.isRequired
};

export default class AuthScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      selectedCategory: 0,
      isLoading: false,
      isPasswordValid: true,
      isConfirmationValid: true
    };

    this.selectCategory = this.selectCategory.bind(this);
    this.login = this.login.bind(this);
    this.signUp = this.signUp.bind(this);
  }

  selectCategory(selectedCategory) {
    LayoutAnimation.easeInEaseOut();
    this.setState({
      selectedCategory,
      isLoading: false
    });
  }

  login() {
    const { password } = this.state;
    this.setState({ isLoading: true });
    // Simulate an API call
    setTimeout(() => {
      LayoutAnimation.easeInEaseOut();
      this.setState({
        isLoading: false,
        isPasswordValid: password.length >= 8 || this.passwordInput.shake()
      });
    }, 1500);
  }

  signUp() {
    const { password, passwordConfirmation } = this.state;
    this.setState({ isLoading: true });
    // Simulate an API call
    setTimeout(() => {
      LayoutAnimation.easeInEaseOut();
      this.setState({
        isLoading: false,
        isPasswordValid: password.length >= 8 || this.passwordInput.shake(),
        isConfirmationValid:
          password == passwordConfirmation || this.confirmationInput.shake()
      });
    }, 1500);
  }

  render() {
    const {
      selectedCategory,
      isLoading,
      isPasswordValid,
      isConfirmationValid,
      email,
      password,
      passwordConfirmation
    } = this.state;
    const isLoginPage = selectedCategory === 0;
    const isSignUpPage = selectedCategory === 1;

    return (
      <View style={styles.container}>
        <KeyboardAvoidingView
          contentContainerStyle={styles.loginContainer}
          behavior="position"
        >
          <View style={styles.titleContainer}>
            <View style={{ flexDirection: "row" }}>
              <Text style={styles.titleText}>BEAUX</Text>
            </View>
            <View style={{ marginTop: -10, marginLeft: 10 }}>
              <Text style={styles.titleText}>VOYAGES</Text>
            </View>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Button
              disabled={isLoading}
              clear
              activeOpacity={0.7}
              onPress={() => this.selectCategory(0)}
              containerStyle={{ flex: 1 }}
              titleStyle={[
                styles.categoryText,
                isLoginPage && styles.selectedCategoryText
              ]}
              title={"Login"}
            />
            <Button
              disabled={isLoading}
              clear
              activeOpacity={0.7}
              onPress={() => this.selectCategory(1)}
              containerStyle={{ flex: 1 }}
              titleStyle={[
                styles.categoryText,
                isSignUpPage && styles.selectedCategoryText
              ]}
              title={"Sign up"}
            />
          </View>
          <View style={styles.rowSelector}>
            <TabSelector selected={isLoginPage} />
            <TabSelector selected={isSignUpPage} />
          </View>
          {/* //!ISSUE LIES HERE */}
          <View style={styles.formContainer}>
            <Input
              leftIcon={
                <Icon
                  name="envelope-o"
                  color="rgba(0, 0, 0, 0.38)"
                  size={25}
                  style={{ backgroundColor: "transparent" }}
                />
              }
              value={email}
              keyboardAppearance="light"
              autoFocus={false}
              autoCapitalize="none"
              autoCorrect={false}
              keyboardType="email-address"
              returnKeyType="next"
              inputStyle={{ marginLeft: 10 }}
              placeholder={"Email"}
              containerStyle={{
                borderBottomColor: "rgba(0, 0, 0, 0.38)"
              }}
          ref={input => (this.emailInput = input)}
          onSubmitEditing={() => this.passwordInput.focus()}
          onChangeText={email => this.setState({ email })}
        />
        <Input
          leftIcon={
            <SimpleIcon
              name="lock"
              color="rgba(0, 0, 0, 0.38)"
              size={25}
              style={{ backgroundColor: "transparent" }}
            />
          }
          value={password}
          keyboardAppearance="light"
          autoCapitalize="none"
          autoCorrect={false}
          secureTextEntry={true}
          returnKeyType={isSignUpPage ? "next" : "done"}
          blurOnSubmit={true}
          containerStyle={{
            marginTop: 16,
            borderBottomColor: "rgba(0, 0, 0, 0.38)"
          }}
          inputStyle={{ marginLeft: 10 }}
          placeholder={"Password"}
          ref={input => (this.passwordInput = input)}
          onSubmitEditing={() =>
            isSignUpPage ? this.confirmationInput.focus() : this.login()
          }
          onChangeText={password => this.setState({ password })}
          errorMessage={
            isPasswordValid ? null : "Please enter at least 8 characters"
          }
        />
        {isSignUpPage && (
          <Input
            icon={
              <SimpleIcon
                name="lock"
                color="rgba(0, 0, 0, 0.38)"
                size={25}
                style={{ backgroundColor: "transparent" }}
              />
            }
            value={passwordConfirmation}
            secureTextEntry={true}
            keyboardAppearance="light"
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="default"
            returnKeyType={"done"}
            blurOnSubmit={true}
            containerStyle={{
              marginTop: 16,
              borderBottomColor: "rgba(0, 0, 0, 0.38)"
            }}
            inputStyle={{ marginLeft: 10 }}
            placeholder={"Confirm password"}
            ref={input => (this.confirmationInput = input)}
            onSubmitEditing={this.signUp}
            onChangeText={passwordConfirmation =>
              this.setState({ passwordConfirmation })
            }
            errorMessage={
              isConfirmationValid ? null : "Please enter the same password"
            }
          />
        )}
        {/* //!ISSUE ENDS HERE */}
        <Button
          buttonStyle={styles.loginButton}
          containerStyle={{ marginTop: 32, flex: 0 }}
          activeOpacity={0.8}
          title={isLoginPage ? "LOGIN" : "SIGN UP"}
          onPress={isLoginPage ? this.login : this.signUp}
          titleStyle={styles.loginTextButton}
          loading={isLoading}
          disabled={isLoading}
        />
      </View>
    </KeyboardAvoidingView>
    <View style={styles.helpContainer}>
      <Button
        title={"Need help ?"}
        titleStyle={{ color: "red" }}
        buttonStyle={{ backgroundColor: "transparent" }}
        underlayColor="transparent"
        onPress={() => console.log("Account created")}
      />
    </View>
  </View>
);
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#034d84",
    flex: 1
  },
  rowSelector: {
    height: 20,
    flexDirection: "row",
    alignItems: "center"
  },
  selectorContainer: {
    flex: 1,
    alignItems: "center"
  },
  selected: {
    position: "absolute",
    borderRadius: 50,
    height: 0,
    width: 0,
    top: -5,
    borderRightWidth: 70,
    borderBottomWidth: 70,
    borderColor: "white",
    backgroundColor: "white"
  },
  loginContainer: {
    alignItems: "center",
    justifyContent: "center"
  },
  loginTextButton: {
    fontSize: 16,
    color: "white",
    fontWeight: "bold"
  },
  loginButton: {
    backgroundColor: "rgba(232, 147, 142, 1)",
    borderRadius: 10,
    height: 50,
    width: 200
  },
  titleContainer: {
    height: 150,
    backgroundColor: "transparent",
    justifyContent: "center"
  },
  formContainer: {
    backgroundColor: "white",
    width: SCREEN_WIDTH - 30,
    borderRadius: 10,
    paddingTop: 32,
    paddingBottom: 32,
    alignItems: "center"
  },
  loginText: {
    fontSize: 16,
    fontWeight: "bold",
    color: "white"
  },
  categoryText: {
    textAlign: "center",
    color: "white",
    fontSize: 24,
    fontFamily: "light",
    backgroundColor: "transparent",
    opacity: 0.54
  },
  selectedCategoryText: {
    opacity: 1
  },
  titleText: {
    color: "white",
    fontSize: 30,
    fontFamily: "regular"
  },
  helpContainer: {
    height: 64,
    alignItems: "center",
    justifyContent: "center"
  }
});

Answer 1

根据您在react-native-elements版本0.19.1上的输入，看来Input组件不可用（ 请参阅docs ）。 仅v1.0.0 beta版本支持输入作为组件。