反應原生。在我的代碼有一些錯誤

Question

我創建我的項目和代碼是不負責

我創建按鈕回來，我需要去登錄頁面，但它不工作。

我想我的代碼有一些錯誤，但我嘗試修復它。所以，我需要某人的幫助來幫助我

我會告訴你我的代碼。

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> 
); 
} 
} 

Answer 1

你不應該使用let newState = this.state，這是一個卷影副本和newState仍指向this.state。下面

try代碼，並在close方法解決這兩個

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

如果仍無法正常工作，我會幫忙看看，如果一些別的問題，謝謝

Answer 2

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>