Question

我目前正在学习有关React Native身份验证的基本教程。当我启动项目时，它会出现以下错误：

我理解错误，但看不出我做错了什么。特别是，在错误消失和项目编译之前，我评论了我的观点。这是犯罪者。为什么会出现这样的错误？

import React, { Component } from 'react';

import {
  ScrollView,
  StyleSheet,
  TouchableHighlight,
  Text
} from 'react-native';

const t = require('tcomb-form-native');

const Form = t.form.Form

const newUser = t.struct({
  email: t.String,
  password:  t.String
})

const options = {
  fields: {
    email: {
      autoCapitalize: 'none',
      autoCorrect: false
    },
    password: {
      autoCapitalize: 'none',
      password: true,
      autoCorrect: false
    }
  }
}

class RegisterView extends Component {

  constructor(props) {
    super(props)
    this.state = {
      value: {
        email: '',
        password: ''
      }
    }
  }

  componentWillUnmount() {
    this.setState = {
      value: {
        email: '',
        password: null
      }
    }
  }

  _onChange = (value) => {
    this.setState({
      value
    })
  }

  _handleAdd = () => {
    const value = this.refs.form.getValue();
    // If the form is valid...
    if (value) {
      const data = {
        email: value.email,
        password: value.password,
      }
      // Serialize and post the data
      const json = JSON.stringify(data);
      fetch('http://localhost:3000/users/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        },
        body: json
      })
      .then((response) => response.json())
      .then(() => {
        alert('Success! You may now log in.');
        // Redirect to home screen
        this.props.navigator.pop();
      })
      .catch((error) => {
        alert('There was an error creating your account.');
      })
      .done()
    } else {
      // Form validation error
      alert('Please fix the errors listed and try again.')
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <Form
          ref='form'
          type={newUser}
          options={options}
          value={this.state.value}
          onChange={this._onChange}
        />
        <TouchableHighlight onPress={this._handleAdd}>
          <Text style={[styles.button, styles.greenButton]}>Create account</Text>
        </TouchableHighlight>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    flexDirection: 'column'
  },
  button: {
    borderRadius: 4,
    padding: 20,
    textAlign: 'center',
    marginBottom: 20,
    color: '#fff'
  },
  greenButton: {
    backgroundColor: '#4CD964'
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center'
  }
})

module.exports = RegisterView

Answer 1

根据tcomb-form-native的文件，

tcomb-form-native ^ 0.5：react-native＆gt; = 0.25.0 tcomb-form-native ^ 0.4：react-native＆gt; = 0.20.0 tcomb-form-native ^ 0.3：react-native＆lt; 0.13.0

我的react-native --version

react-native-cli：1.0.0 反应原生：0.36.0

因此，运行npm install tcomb-form-native@0.5.3为我解决了这个问题。

试图访问ReactNative.Component错误

1 个答案: