react-native - 请看一下这段代码我的注册按钮不会指示我配置组件反应原生

Question

帮我解决这个问题，这样我就可以继续我的工作了。还有我可以为您提供的解决方案所需的所有其他文件。

profile.js

import React from "react";
import { StyleSheet, Text, View, StatusBar } from "react-native";
import { render } from "react-dom";

class Profile extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>This is the profile page </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#455a64",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  textStyle: {
    color: "#fff",
    fontSize: 18,
  },
});

export default Profile;

注册.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
} from "react-native";

import { createNewUser } from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/actions/auth.actions.js";
import { render } from "react-dom";
import { connect } from "react-redux";
import Form from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/form.js";
import { compose } from "redux";
import Logo from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/logo.js";
import SignupForm from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/signupform.js";
import { Actions } from "react-native-router-flux";
import { Field, reduxForm } from "redux-form";
import InputText from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/InputText.js";
import Loader from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/Loader.js";
class Signup extends React.Component {
  goBack() {
    Actions.pop();
  }

  createNewUser = (values) => {
    this.props.dispatch(createNewUser(values));
  };

  onSubmit = (values) => {
    this.createNewUser(values);
  };

  renderTextInput = (field) => {
    const {
      meta: { touched, error },
      label,
      secureTextEntry,
      maxLength,
      keyboardType,
      placeholder,
      input: { onChange, ...restInput },
    } = field;
    return (
      <View>
        <InputText
          onChangeText={onChange}
          maxLength={maxLength}
          placeholder={placeholder}
          keyboardType={keyboardType}
          secureTextEntry={secureTextEntry}
          label={label}
          {...restInput}
        />
        {touched && error && <Text style={styles.errorText}>{error}</Text>}
      </View>
    );
  };

  render() {
    const { createUsers, handleSubmit } = this.props;
    return (
      <View style={styles.container}>
        {createUsers.isLoading && <Loader />}
        <Logo />

        <Field
          name="name"
          placeholder=" First Name"
          component={this.renderTextInput}
        />
        <Field
          name="name"
          placeholder=" Last Name"
          component={this.renderTextInput}
        />
        <Field
          name="email"
          placeholder="Email"
          component={this.renderTextInput}
        />
        <Field
          name="password"
          placeholder="Password"
          secureTextEntry={true}
          component={this.renderTextInput}
        />
        <TouchableOpacity
          style={styles.button}
          onPress={handleSubmit(this.onSubmit)}
        >
          <Text style={styles.buttonText}>Signup</Text>
        </TouchableOpacity>
        <View style={styles.signupTextCont}>
          <Text style={styles.signupText}>Already have an account?</Text>
          <TouchableOpacity onPress={this.goBack}>
            <Text style={styles.signupButton}> Sign in</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = "First Name is required";
  }
  if (!values.name) {
    errors.name = "Last Name is required";
  }
  if (!values.email) {
    errors.email = "Email is required";
  }
  if (!values.password) {
    errors.password = "Password is required";
  }
  return errors;
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#455a64",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  signupTextCont: {
    flexGrow: 1,
    alignItems: "flex-end",
    justifyContent: "center",
    paddingVertical: 16,
    flexDirection: "row",
  },
  signupText: {
    color: "rgba(255,255,255,0.6)",
    fontSize: 16,
  },
  signupButton: {
    color: "#ffffff",
    fontSize: 16,
    fontWeight: "500",
  },
  button: {
    width: 300,
    backgroundColor: "#1c313a",
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 13,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "500",
    color: "#ffffff",
    textAlign: "center",
  },
  errorText: {
    color: "#ffffff",
    fontSize: 14,
    paddingHorizontal: 16,
    paddingBottom: 8,
  },
  inputBox: {
    width: 300,
    backgroundColor: "rgba(255, 255,255,0.2)",
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: "#ffffff",
    marginVertical: 10,
  },
});
mapStateToProps = (state) => ({
  createUsers: state.authReducer.createUsers,
});

mapDispatchToProps = (dispatch) => ({
  dispatch,
});

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({
    form: "register",
    validate,
  })
)(Signup);

auth.reducer.js

import { combineReducers } from "redux";

const createUsers = (state = {}, action) => {
  switch (action.type) {
    case "CREATE_USER_LOADING":
      return {
        isLoading: true,
        isError: false,
        isSuccess: false,
        errors: null,
        isLoggedIn: false,
      };

    case "CREAT_USER_SUCCESS":
      return {
        isLoading: false,
        isError: false,
        isSuccess: true,
        errors: null,
        isLoggedIn: true,
      };

    case "CREAT_USER_FAIL":
      return {
        isLoading: false,
        isError: true,
        isSuccess: false,
        errors: action.payload,
        isLoggedIn: false,
      };

    default:
      return state;
  }
};
/*const authData = (state = {}, action) => {
  switch (action.type) {
    case "AUTH_USER_SUCCESS":
      return {
        token: action.token,
        isLoggedIn: true,
      };

    case "AUTH_USER_FAIL":
      return {
        token: null,
        isLoggedIn: false,
      };
    default:
      return state;
  }
};

const loginUser = (state = {}, action) => {
  switch (action.type) {
    case "LOGIN_USER_LOADING":
      return {
        isLoading: true,
        isError: false,
        isSuccess: false,
        errors: null,
      };

    case "LOGIN_USER_SUCCESS":
      return {
        isLoading: false,
        isError: false,
        isSuccess: true,
        errors: null,
      };

    case "LOGIN_USER_FAIL":
      return {
        isLoading: false,
        isError: true,
        isSuccess: false,
        errors: action.payload,
      };

    default:
      return state;
  }
};*/
export default combineReducers({
  createUsers,
  //loginUser,
  //authData,
});

路由.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { Router, Stack, Scene } from "react-native-router-flux";
import Login from "../pages/login.js";
import Signup from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/pages/signup.js";
import Profile from "../pages/profile.js";
class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Scene>
          <Scene key="root" hideNavBar={true} initial={!this.props.isLoggedIn}>
            <Scene key="signup" component={Signup} title="Register" />
            <Scene key="login" component={Login} />
          </Scene>
          <Scene key="app" hideNavBar={true} initial={this.props.isLoggedIn}>
            <Scene key="profile" component={Profile} initial={true} />
          </Scene>
        </Scene>
      </Router>
    );
  }
}
export default Routes;

主.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { render } from "react-dom";
import { createUsers } from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/reducers/auth.reducer.js";
import { connect } from "react-redux";

import Routes from "/Users/ayeshasiddiquebutt/elearning9thclassapp/sourcefiles/components/routes.js";
import { Actions } from "react-native-router-flux";

class Main extends React.Component {
  render() {
    const { createUsers } = this.props;
    console.log(this.props.createUsers.isLoggedIn);
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#1c313a" barStyle="light-content" />
        <Routes isLoggedIn={this.props.createUsers.isLoggedIn} />
      </View>
    );
  }
}

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

mapStateToProps = (state) => ({
  createUsers: state.authReducer.createUsers,
});`enter code here`

export default connect(mapStateToProps, null)(Main);

标签： react-native