反应原生。在我的代码中有一些错误

时间：2017-03-02 04:15:34

标签： javascript ios react-native

我创建了我的项目，代码不负责

我创建了按钮，我需要进入登录页面但不起作用。

我认为我的代码中有一些错误，但我尝试修复它。所以，我需要有人帮助我

我会向你展示我的代码。

Loginform.js 

import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
    StyleSheet,
    KeyboardAvoidingView,
    View,
    TouchableOpacity,
    Text
} from 'react-native';

import UserInput from './UserInput';
// import ButtonSubmit from './ButtonSubmit';
// import SignupSection from './SignupSection';

 import usernameImg from '../image/username.png';
 import passwordImg from '../image/password.png';
 import ButtonSubmit from './ButtonSubmit';
 import Logo from './Logo';
 const DEVICE_WIDTH = Dimensions.get('window').width;
 const DEVICE_HEIGHT = Dimensions.get('window').height;
 const MARGIN = 40;

export default class Loginform extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Logo />
                    <View style={styles.container2}>
                    <KeyboardAvoidingView behavior='padding' >
                        <UserInput source={usernameImg}
                            placeholder='Username'
                            autoCapitalize={'none'}
                            returnKeyType={'done'}
                            autoCorrect={false} />
                        <UserInput source={passwordImg}
                            secureTextEntry={true}
                            placeholder='Password'
                            returnKeyType={'done'}
                            autoCapitalize={'none'}
                            autoCorrect={false} />
                    </KeyboardAvoidingView>
                    </View>
                <TouchableOpacity style={{

                            alignItems: 'center',
                            justifyContent: 'center',
                            backgroundColor: '#ff8011',
                            height: MARGIN,
                            borderRadius: 20,
                            zIndex: 100,
                            width: DEVICE_WIDTH - 40,
                            borderRadius: 5,
                            paddingLeft: 5,
                            paddingRight: 5,
                            paddingTop: 10,
                            paddingBottom: 10,
                            top: -120,
                            justifyContent: 'center',
                        }}
                        onPress={()=>this.props.manageModal('Route', true)}>
                <Text style={{color: '#fff',fontWeight: '700',fontSize: 15 , textAlign: 'center'}}>Login</Text>
        </TouchableOpacity>
                <Text style={styles.Doyou}> Do not have an account yet?</Text>
                <TouchableOpacity >
                    <Text style={styles.Sign} onPress={()=>this.props.manageModal('SignupPage', true)}>SIGN UP</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 5,
        top: 0,
        alignItems: 'center',
    },
    container2: {
        flex: 1,
        top: -50,
        alignItems: 'center',
    },
    Sign: {
        top: -50,
        color: 'white',
    fontSize: 28,
    fontStyle: 'italic',
    fontWeight: '700',
        backgroundColor: 'transparent',
    },
  Doyou:{
    top: -55,
    color: '#DCDCDC',
    fontSize: 15,
    backgroundColor: 'transparent',
  }
});

Modal.js （导航器）

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  Modal
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Logo from './Logo';
import Loginform from './Loginform';
import ButtonSubmit from './ButtonSubmit';
import Wallpaper from './Wallpaper';
import Signup from './Signup';
import SignupPage from './SignupPage';
import Route from './Route';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#05121F',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


export default class AppModal extends Component {
  render(){
    const state = this.props.state;
      let status = state.modal;
      let setComponent = <View />;

      if(state.modalComponent === 'login'){
        setComponent = <Loginform manageModal={(mode, status)=> this.props.manageModal(mode, status)} closeModal={()=>this.props.closeModal()} />;
      }else if(state.modalComponent === 'signup'){
        setComponent = <Signup manageModal={(mode, status)=> this.props.manageModal(mode, status)} closeModal={()=>this.props.closeModal()} />;
      }else if(state.modalComponent === 'SignupPage'){
        setComponent = <SignupPage manageModal={(mode, status)=> this.props.manageModal(mode, status)} closeModal={()=>this.props.closeModal()}/>;
      }else if(state.modalComponent === 'Route'){
        setComponent = <Route manageModal={(mode, status)=> this.props.manageModal(mode, status)} closeModal={()=>this.props.closeModal()}/>;
    }
      // console.log('Test State : ' + JSON.stringify(this.props.state));
      return (
        <Modal
          transparent={true}
          visible={status}
          onRequestClose={() => ''}
        >
          <Wallpaper>
            {setComponent}
          </Wallpaper>
        </Modal>
  );
}
}

SignupPage.js 

import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';

const background = require("../image/map.png");
const backIcon = require("../image/back.png");
const personIcon = require("../image/signup_person.png");
const lockIcon = require("../image/signup_lock.png");
const emailIcon = require("../image/signup_email.png");
const ConfirmpassIcon = require("../image/signup_lock.png");
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bg: {
    paddingTop: 30,
    width: null,
    height: null
  },
  headerContainer: {
    flex: 1,
  },
  inputsContainer: {
    flex: 3,
    marginTop: 50,
  },
  footerContainer: {
    flex: 1
  },
  headerIconView: {
    marginLeft: 10,
    backgroundColor: 'transparent'
  },
  headerBackButtonView: {
    width: 25,
    height: 25,
  },
  backButtonIcon: {
    width: 25,
    height: 25
  },
  headerTitleView: {
    backgroundColor: 'transparent',
    marginTop: 25,
    marginLeft: 25,
  },
  titleViewText: {
    fontSize: 40,
    color: '#fff',
  },
  inputs: {
    paddingVertical: 20,
  },
  inputContainer: {
    borderWidth: 1,
    borderBottomColor: '#CCC',
    borderColor: 'transparent',
    flexDirection: 'row',
    height: 75,
  },
  iconContainer: {
    paddingHorizontal: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputIcon: {
    width: 30,
    height: 30,
  },
  input: {
    flex: 1,
    fontSize: 20,
  },
  signup: {
    top: 80,
    backgroundColor: '#ff8011',
    paddingVertical: 25,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 15,
  },
  signin: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  greyFont: {
    color: '#D8D8D8'
  },
  whiteFont: {
    color: '#FFF'
  },
  Confirmtext: {
    color: '#FFF',
    fontSize: 20,
    fontWeight: 'bold',
  },
    backButton: {
        top: 100,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ff8011',
        height: MARGIN,
        borderRadius: 20,
        zIndex: 100,
    width: DEVICE_WIDTH - 40,
        left: 20,
    },
    backtext: {
        color: '#FFF',
    fontSize: 20,
    fontWeight: 'bold',
    }
})

export default class SignupPage extends Component {
    render() {
  return (
    <View style={styles.container}>
        <Image
          source={background}
          style={[styles.container, styles.bg]}
          resizeMode="cover"
        >
          <View style={styles.headerContainer}>
            <View style={styles.inputContainer}>
              <View style={styles.iconContainer}>
                <Image
                  source={personIcon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
              </View>
              <TextInput
                style={[styles.input, styles.whiteFont]}
                placeholder="Username"
                placeholderTextColor="#FFF"
                underlineColorAndroid='transparent'
              />
            </View>

            <View style={styles.inputContainer}>
              <View style={styles.iconContainer}>
                <Image
                  source={emailIcon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
              </View>
              <TextInput
                style={[styles.input, styles.whiteFont]}
                placeholder="Email"
                placeholderTextColor="#FFF"
              />
            </View>

            <View style={styles.inputContainer}>
              <View style={styles.iconContainer}>
                <Image
                  source={lockIcon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
              </View>
              <TextInput
                secureTextEntry={true}
                style={[styles.input, styles.whiteFont]}
                placeholder="Password"
                placeholderTextColor="#FFF"
              />
            </View>

            <View style={styles.inputContainer}>
              <View style={styles.iconContainer}>
                <Image
                  source={ConfirmpassIcon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
              </View>
              <TextInput
                style={[styles.input, styles.whiteFont]}
                placeholder="Confirm Password"
                placeholderTextColor="#FFF"
                underlineColorAndroid='transparent'
              />
            </View>

          </View>

          <View style={styles.footerContainer}>

            <TouchableOpacity style={styles.wrapper}>
              <View style={styles.signup}>
                <Text style={styles.Confirmtext}>Confirm</Text>
              </View>
            </TouchableOpacity>

                        <TouchableOpacity style={styles.backButton}>
                            <Text style={styles.backtext} onPress={()=>this.props.manageModal('login', true)}>Back</Text>
                        </TouchableOpacity>

          </View>
        </Image>
      </View>
    );
}
}

App.js 

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Logo from './Logo';
import Loginform from './Loginform';
import ButtonSubmit from './ButtonSubmit';
import Wallpaper from './Wallpaper';
import AppModal from './Modal';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#05121F',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      modal: false,
      modalComponent: null,
    };
  }

  componentWillMount () {
  this.checkLoginStatus()
}

// firebase check login status
checkLoginStatus(){
  this.manageModal('login', true);
}

  manageModal(mode, status){
    let newState = this.state;
    newState.modalComponent = mode;
    newState.modal = status;
    this.setState(newState);
  }

  closeModal(){
    let newState = this.state;
    newState.modalComponent = null;
    newState.modal = false;
    this.setState(newState);
  }

  render(){
  return (
    <View style={styles.container}>
        <AppModal
          state={this.state}
          closeModal={()=>this.closeModal()}
          manageModal={(mode, status)=>this.manageModal(mode, status)}
          />
    </View>
  );
}
}

2 个答案:

答案 0 :(得分：0)

您不应该使用let newState = this.state，这是一个卷影副本，而newState仍然指向this.state。

尝试以下代码并在close方法中修复

  manageModal(mode, status){
    let newState = Object.assign{{}, this.state}
    newState.modalComponent = mode;
    newState.modal = status;
    this.setState(newState);
  }

如果仍然不能正常工作，我会帮助看看是否有其他问题，谢谢

答案 1 :(得分：0)

<强> SignupPage.js

在你的代码上

<TouchableOpacity style={styles.backButton}>
  <Text style={styles.backtext} onPress={()=>this.props.manageModal('login', true)}>Back</Text>
</TouchableOpacity>

编辑

<TouchableOpacity style={styles.backButton}  onPress={()=>this.props.closeModal()}>
   <Text style={styles.backtext}>Back</Text>
</TouchableOpacity>

相关问题
最新问题