Question

我是本机反应的新手。我正在尝试建立登录表单并在成功通过身份验证后导航，或者在登录失败时显示错误。

failur登录案例运行良好，但是成功登录后，我无法导航。

这是LoginForm.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from './actions';

import { Button, Card, CardItem, Input, Spinner } from './common';

class LoginForm extends Component {

constructor(){
  super();
  this.state = {
    username: '',
    password: ''
  };
}
componentWillReceiveProps(nextProps) {

  if(nextProps.user){
    this.props.navigation.navigate('Home');
  }
}
_onLoginPressed(){
  const { username, password } = this.state;
  this.props.loginUser({ username, password });
}
  _renderButton() {
    if(this.props.loading){
      return <Spinner />
    }
    return (
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
    );
  }

  render() {

    return(
        <Card>

          <CardItem>
             <Input
               label='Email'
               placeholder='Enter your email'
               secureTextEntry={false}
               onChangeText={(username) => this.setState({ username }) }
             />
          </CardItem>

          <CardItem>
             <Input
               label='Password'
               placeholder='Enter your password'
               secureTextEntry
               onChangeText={(password) => this.setState({ password }) }
             />
          </CardItem>

          <Text>{this.props.error}</Text>
          <CardItem>
            { this._renderButton() }
          </CardItem>

        </Card>
    );

  }

}

const mapStateToProps = state => {
  return {
    error: state.auth.error,
    loading: state.auth.loading,
    user: state.auth.user


   }
    }

//Export component to be available for other compnents in the Apps
export default connect(mapStateToProps, { loginUser })(LoginForm);

这是我的RootNavigator.js：

import { StackNavigator } from 'react-navigation';
import Home from './Home';
import LoginForm from './LoginForm';

const RootNavigator = StackNavigator({
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }
  },
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
      headerLeft: false
    }
  }
});

export default RootNavigator;

Home.js：

 import React, { Component } from 'react';
    import { View } from 'react-native';
    import Button from './common/Button';

    class Home extends Component {

    constructor(){
      super();
      this.state = {
        title: 'Title from state'
      };
    }
    _onLoginPressed(){

      this.props.navigation.navigate('Login');
    }

      render() {
    return(
      <View>
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
      </View>
    );
  }
}

export default Home;

当我具有成功凭据和登录名时，应该导航到主屏幕，但出现此错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error is located at:
    in RCTView
    in Home
    in SceneView
    in RCTView
    in RCTView
    in RCTView
    in AnimatedComponent
    in Screen
    in Card
    in Container
    in RCTView
    in RCTView
createFiberFromElement
    index.delta?platform=android&dev=false&minify=false:10116:24
<unknown>
    index.delta?platform=android&dev=false&minify=false:10818:287
reconcileChildrenAtExpirationTime

请帮忙，我错过了什么？

Answer 1

通常，导出其中一个文件（Home或LoginForm）时遇到问题。因此只需添加其他文件以将其签出。

Answer 2

转到var input = ["a.name", "a.type", "b.city.name" , "b.city.zip", "b.desc","c"]; var output = {}; for(var i =0; i < input.length; i+=2){ output[String.fromCharCode(i+97)] = {}; output[String.fromCharCode(i+97)].name = input[i]; output[String.fromCharCode(i+97)].type = input[i+1]; } console.log(JSON.stringify(output));并确保正确导出了组件，尤其是./common。因为看起来您有一个Button按钮和一个./common按钮

不变违规：元素类型无效：预期为字符串：React-Native

2 个答案: