首页 文章

不变违规：登录页面react-native上的元素类型无效

提问于
浏览 次
4

所以我是新的反应和目前我正在做反应原生的登录页面，我得到了这个error在我的应用程序

不变违规：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但未定义 . 您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入 . 检查'Button'的render方法 .

这是 App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
import { Input } from './components/Input';
import { Button } from './components/Button';

export default class App extends React.Component {
  state = {
    email: '',
    password: ''
  }
  render() {
    return (
      <View style={styles.container}>
        <Input
          placeholder='Enter your mail...'
          label='Email'
          onChangeText={email => this.setState({email})}
          value={this.state.email}
        />
        <Input
          placeholder='Enter your password'
          label='Password'
          secureTextEntry
          onChangeText={password => this.setState({password})}
          value={this.state.password}
        />
        <Button onPress={() => console.log('pressed')}>Log In</Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
});

这是Button.js

import React from 'react';
import {StyleSheet, Text, TouchableOpactity} from 'react-native';

const Button = ({ onPress, children }) => {
    return (
        <TouchableOpactity onPress={onPress} style={styles.button}>
            <Text style={styles.text}> { children } </Text>
        </TouchableOpactity>

    )
}

const styles = StyleSheet.create({
    button: {
        marginTop: 10,
        padding: 20,
        width: '100%',
        backgroundColor: '#00aeef',
        borderRadius: 4,
        alignItems: 'center',
      },
      text: {
        color: 'white',
        fontWeight: '700',
        fontSize: 18,
      }
    });

export { Button };

任何想法为什么这发生在我的应用程序？谢谢

更新：我按照下面的解决方案，它提出了另一个error

任何解决方案

javascript reactjs react-native

2 回答

  • 2

    在你的Button.js中你应该写：

    export default Button;

    你的导入应该是：

    import Button from './components/Button';

    代替 ：

    export { Button };

    在这种情况下最好有 export default Button .

    回复于
  • 1

    代码的问题是在 Button.js 中导入 TouchableOpactity 时 . 它应该是TouchableOpacity

    回复于

相关问题