Developers，
帮助。我在下面收到此错误，我一直在倾注它试图找到问题，但就是看不到它！这是怎么回事？它似乎源于从 146 到 236 的代码。
不变冲突：元素类型无效：预期字符串（对于内置>组件）或类/函数（对于复合组件），但得到：>未定义。您可能忘记从>定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。
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"
}
});
根据您输入的 react-native-elements 版本 0.19.1，输入组件似乎不可用（请参阅文档）。只有 v1.0.0 测试版支持输入作为组件。