Reagire Nativo come passare this.setState passare al genitore

Question

Sono nuovo a React Native Sto creando un'app di esempio in cui l'utente può accedere e registrarsi per un nuovo account.

ho due classi Reagire,

Uno è il principale index.ios.js classe e un'altra classe chiamata Register.js. Nella classe index sto dicendo che se il registro delle variabili è vero renderizza la schermata di registrazione.

Nella classe register.js sto provando ad impostare la variabile register su false usando this.setState ({register: false}) ma non sta causando il re rendering del genitore (index.ios.js). È un metodo super (stato) o qualcosa di simile che mi manca? Credo che lo stato genitore non ottenga i valori della variabile di registro aggiornata.

Qui sono i miei corsi:

Render index.ios.js interna:

render: function() { 
    if(this.state.register) { 
     return this.renderRegisterScreen(); 
    } 
    else if (this.state.loggedIn) { 
     return this.userLoggedIn(); 
    } 
    else { 
     return this.renderLoginScreen(); 
    } 
    } 

Register.js:

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TouchableHighlight, 
    TextInput, 
} = React; 

var Register = React.createClass({ 
     render: function() { 
     return (
      <View style={styles.container}> 
      <View style={styles.rafitoImage}> 
       <Image source={require('./logo.png')}></Image> 
       <Text style={styles.slogan}>Eliminate the need to wait!</Text> 
      </View> 
      <View style={styles.bottomSection}> 
       <View style={styles.username}> 
       <View style={styles.inputBorder}> 
        <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/> 
       </View> 
       <View style={styles.inputBorder}> 
        <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/> 
       </View> 
       <View style={styles.inputBorder}> 
        <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/> 
       </View> 
       <View style={styles.inputBorder}> 
        <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/> 
       </View> 
       <View style={styles.inputBorder}> 
        <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/> 
       </View> 
       <TouchableHighlight style={styles.button} 
        underlayColor='#f1c40f' onPress={this.register}> 
         <Text style={styles.buttonText}>Register</Text> 
       </TouchableHighlight> 
       <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin} 
       underlayColor='#ffffff'> 
       <Text style={styles.signUpText}>Already A Member </Text> 
       </TouchableHighlight> 
       </View> 
      </View> 
      <View style={styles.copyright}> 
      </View> 
      </View> 
     ); 
    }, 

    resetToLogin: function() { 
     this.setState({ 
      register: false //I want this to re render the home screen with the variable register as false 
     }); 
    } 
}); 

    var styles = StyleSheet.create({ 
     container: { 
     flex : 1 
     }, 
     bottomSection: { 
     flex: 5, 
     flexDirection: 'row' 
     }, 
     button: { 
      height: 36, 
      backgroundColor: '#32c5d2', 
      justifyContent: 'center', 
      marginTop: 20 
     }, 
     buttonText: { 
      fontSize: 18, 
      color: 'white', 
      alignSelf: 'center' 
     }, 
     signUpText: { 
     color: '#3598dc' 
     }, 
     signUp: { 
     alignItems: 'flex-end', 
     marginTop: 10, 
     }, 
     username: { 
     flex: 1, 
     padding: 5 
     }, 
     rafitoImage: { 
     flex: 3, 
     justifyContent: 'center', 
     alignItems: 'center', 
     }, 
     copyright: { 
     alignItems: 'center' 
     }, 
     usernameInput: { 
      height: 36, 
      marginTop: 10, 
      marginBottom: 10, 
      fontSize: 18, 
      padding: 5 
     }, 
     copyrightText: { 
     color: '#cccccc', 
     fontSize: 12 
     }, 
     inputBorder: { 
     borderBottomWidth: 1, 
     borderBottomColor: '#ececec' 
     }, 
     slogan: { 
     color: '#3598dc' 
     } 
    }); 

module.exports = Register; 

Tentativo 1

Come per la risposta Ho aggiunto questo al mio index.ios.js

renderRegisterScreen: function() { 
    return (
     <Register login={this.login}/> 
    ) 
    } 

E ho aggiunto questa ai miei Register.js

<TouchableHighlight style={styles.signUp} onPress={this.props.login} 
       underlayColor='#ffffff'> 
       <Text style={styles.signUpText}>Already A Member </Text> 
       </TouchableHighlight> 

Ma per qualche ragione non ha nemmeno andare alla schermata registro più, esegue la funzione di login non appena lo schermo registro rende . Cosa mi manca adesso? Si prega di avvisare.

Grazie

Aggiornamento

Funziona quando passo verso il basso registrato come una proprietà, ma non quando non lo faccio. Mi piacerebbe capire perché se qualcuno potesse pubblicarlo.

Grazie

Answer 1

è possibile passare alla funzione verso il basso per il bambino come oggetti di scena, quindi impostare lo stato del genitore all'interno del bambino in quel modo.

Parent Componente:

var Parent = React.createClass({ 

    getInitialState() { 
     return { 
      registered: false 
     } 
    }, 

    register(){ 
    console.log("logging in... "); 
    this.setState({ 
     registered: true 
    }); 

    }, 

    render: function() { 
    return (
     <View style={styles.container}> 
     <Child register={this.register.bind(this)} registered={this.state.registered} /> 
     {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}> 
            <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text> 
           </View>} 
     </View> 
    ); 
    } 
}); 

Bambino Componente:

var Child = React.createClass({ 

render: function() { 
return(
    <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}> 
     <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }> 
{this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>} 
     </TouchableHighlight>      
    </View> 
    ) 
    } 
})