Question

Git中心回购在这里：https://github.com/AliYar-Khan/react-navigation.git

当我要在Genny运动模拟器上运行我的react native应用程序时，此错误显示在红色背景区域。

不变违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记了从文件在其中定义。

这是'src / pages /'文件夹中的Login.js

import * as React from 'react';
import {
  TouchableOpacity ,
  View , 
  StyleSheet , 
  ScrollView , 
  Text , 
  TextInput , 
  Dimensions , 
  Alert 
} from 'react-native';

import { connect } from 'react-redux';
import Logo from '../components/Logo';
import clickLogin from '../redux/actions/loginActions';
import { Icon } from 'react-native-elements';

const { height } = Dimensions.get('window');

class Login extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      username : '' ,
      password : '' ,
      screenHeight: height ,
      pendingLoginReqest : false 
    } 
  }

  onContentSizeChange = (contentWidth, contentHeight) => {
    this.setState({ screenHeight: contentHeight });
  };

  Login = () => {
      // firebase.auth().signInWithEmailAndPassword(this.state.username , this.state.password)
      //   .then(()=>{

      //   }, (error) => {
      //     Alert.alert(error.message);
      //   })
    this.props.clickLogin(this.state);
  };

  render() {
    const scrollEnabled = this.state.screenHeight > height;
    const {navigate} = this.props.navigation;
    return (
      <ScrollView style={{ flex: 1 }}
          scrollEnabled={scrollEnabled}
          onContentSizeChange={this.onContentSizeChange}
      >
      <View style={styles.container}> 
          <Logo />
          <TextInput style={styles.textinput}
            returnKeyType='next'
            underlineColorAndroid='rgba(0,0,0,0)'
            placeholder='Email or Username'
            keyboardType='email-address'
            autoCapitalize='none'
            autoCorrect = {false}
            onChangeText={data => this.setState({ username : data })}
            onSubmitEditing={() => this.passwordInput.focus()}
            placeholderTextColor = '#ffffff'
          />

          <TextInput style={styles.textinput}
            underlineColorAndroid='rgba(0,0,0,0)'
            placeholder='Password'
            secureTextEntry
            returnKeyType='go'
            onChangeText={data => this.setState({ password : data})}
            ref= {(input) => this.passwordInput = input}
            placeholderTextColor = '#ffffff'
          />

          <TouchableOpacity style={styles.buttonLogin}
            onPress={this.Login}>
            <Text style={styles.loginButtonText}>Login</Text>  
          </TouchableOpacity> 

          <View style={styles.socialLoginButtons}>
            <Icon.Button name='facebook' size={15} backgroundColor='#1c313a'> 
              <Text style={{fontFamily:'Arial', fontSize:15, fontSize: 16,
                fontWeight: '500', color: '#ffffff', 
                textAlign: 'center'}}
              >
              Login with Facebook
              </Text>
            </Icon.Button>      
          </View>

          <View style={styles.socialLoginButtons}>
            <Icon.Button name='twitter' size={20} backgroundColor='#1c313a'> 
              <Text style={{fontFamily:'Arial', fontSize:15,fontSize: 16,
                fontWeight: '500',color: '#ffffff',textAlign: 'center'}}>
                Login with Twitter
              </Text>
            </Icon.Button>      
          </View>

          <View style={styles.signuptextcont}>
            <Text style={styles.signuptext}>Don't have an Account?</Text>
            <TouchableOpacity style={styles.signupbtn} onPress= {()=>navigate('Signup')}>
              <Text style={styles.signuptext}>Signup</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
}

// const mapStateToProps = state => {
//   return {

//   }
// }

const mapDispatchToProps = (dispatch) => {
    return {
      clickLogin : (user) => dispatch(clickLogin(user)) 
    }
}

export default connect(null,mapDispatchToProps)(Login);

const styles = StyleSheet.create({
  container:{
      flex: 1,
      alignItems: 'center',
      justifyContent:'flex-start'
  },
  text:{
    marginVertical:15,
    color: 'rgba(255,255,255,0.7)',
    fontSize: 20
  },
  textinput:{
    width: 300,
    backgroundColor : 'rgba(255,255,255,0.3)',
    borderRadius: 25,
    paddingHorizontal: 16,
    color: '#ffffff',
    marginVertical: 10
  },
  signuptext:{
    color: 'rgba(255,255,255,0.6)',
    fontSize: 16
  },
  socialLoginButtons:{
    paddingVertical: 5,
    marginVertical: 10,
    width: 300,
    backgroundColor: '#1c313a'
  },
  signuptextcont:{
    flexGrow: 1,
    alignItems: 'flex-end',
    flexDirection: 'row',
    justifyContent:'center',
    paddingVertical: 16    
  },
  buttonLogin:{
    width: 300,
    backgroundColor: '#1c313a',
    borderRadius: 25,
    paddingVertical: 12,
    marginVertical: 5
  },
  signupbtn:{
    color : '#ffffff',
    fontSize: 16,
    fontWeight: '500',
    paddingHorizontal:10
  }
});

和Logo.js如下：

import * as React from 'react';
import { Image, View, StyleSheet, Text } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';


export default class Logo extends React.Component {
    render() {
      return (
        <View style={styles.LogoContainer}> 
            <Image style={{width: 50, height: 50}}
              source={require('../img/favicon.png')}/>
            <Text style={styles.LogoText}>Welcome to the App.</Text>
        </View>
      );
    }
}

const styles = StyleSheet.create({

   LogoContainer:{
      alignItems: 'center',
      justifyContent:'center',
      marginTop:50,
      marginVertical:5,
      marginBottom:5
    },
    LogoText:{
      marginVertical:20,
      color: 'rgba(255,255,255,0.7)',
      fontSize: 20
    }

});

Answer 1

在stacktrace中，问题出在Login.js第82行：

      <View style={styles.socialLoginButtons}>
        <Icon.Button name='facebook' size={15} backgroundColor='#1c313a'> 
          <Text style={{fontFamily:'Arial', fontSize:15, fontSize: 16,
            fontWeight: '500', color: '#ffffff', 
            textAlign: 'center'}}
          >
          Login with Facebook
          </Text>
        </Icon.Button>      
      </View>

在这里，您在检查Icon.Button docs后使用react-native-elements时，没有Icon.Button表示它是未定义的并抛出该错误

不变违规：元素类型无效-React Native

1 个答案: