React Native - Affichage de rendu conditionnel

Question

J'ai une application native sur laquelle je travaille. En ce moment, je veux qu'il y ait deux points de vue. Une page de connexion et la page principale. Il ressemble donc beaucoup à ceci:

index.ios.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Dimensions, 
    StyleSheet, 
    Text, 
    TextInput, 
    Button, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import Scanner from './app/components/Scanner'; 
import Login from './app/components/Login'; 
import Store from './app/mobx/store'; 

export default class TestApp extends Component { 
    render() { 
    if (Store.loggedIn()){ 
     return <Scanner /> 
    } else { 
     return <Login store={Store} /> 
    } 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row', 
    backgroundColor: '#114DA0' 
    } 
}); 

AppRegistry.registerComponent('TestApp',() => TestApp); 

app/composants/Login.js

import React, { Component } from 'react'; 

import { 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
    ScrollView 
} from 'react-native'; 
import Container from './Container'; 
import Button from './Button'; 
import Label from './Label'; 
import {observer} from 'mobx-react/native'; 

@observer 
export default class Login extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     email: '', 
     password: '', 
     isLoggingIn: false, 
     message: '' 
    } 
    this._userLogin = this._userLogin.bind(this); 
    } 
    _userLogin() { 
    console.log("loggin in...") 
    this.setState({isLoggingIn: true, message:''}); 
    var params = { 
     email: this.state.email, 
     password: this.state.password 
    }; 
    var formBody = []; 
    for (var property in params) { 
     var encodedKey = encodeURIComponent(property); 
     var encodedValue = encodeURIComponent(params[property]); 
     formBody.push(encodedKey + "=" + encodedValue); 
    } 
    formBody = formBody.join("&"); 
    fetch("http://example.com:8000/auth/mobile_login", { 
     method: "POST", 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     }, 
     body: formBody 
     }) 
     .then((response) => { 
     return response.json() 
     }) 
     .then((response) => { 
     if (response.error) { 
      this.setState({message: response.message}); 
     } else if (response.user) { 
      this.props.store.logIn(response.user); 
     } 
     }) 
     .then(() => { 
     this.setState({isLoggingIn: false}) 
     }) 
     .done(); 
    } 
    render() { 
    return (
     <ScrollView style={styles.scroll}> 
      <Container> 
      <Label text="Email" /> 
      <TextInput 
       style={styles.textInput} 
       onChangeText={(email) => this.setState({email})} 
      /> 
      </Container> 
      <Container> 
      <Label text="Password" /> 
      <TextInput 
       secureTextEntry={true} 
       style={styles.textInput} 
       onChangeText={(password) => this.setState({password})} 
      /> 
      </Container> 
      <Container> 
      {!!this.state.message && (
       <Text style={{fontSize: 14, color: 'red', padding: 5}}> 
       {this.state.message} 
       </Text> 
      )} 
      <Button 
       label="Sign In" 
       styles={{button: styles.primaryButton, label: styles.buttonWhiteText}} 
       onPress={this._userLogin} /> 
      </Container> 
     </ScrollView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    ... 
}); 

app/composants/Scanner.js

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Dimensions, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import Camera from 'react-native-camera'; 

export default class Scanner extends Component { 
    constructor(){ 
    super(); 
    this.onBarCodeRead = this.onBarCodeRead.bind(this); 
    } 
    onBarCodeRead(e) { 
    this.setState({text: e.data}); 
    } 
    render() { 
    return (
     <View style={styles.container}> 
      <Camera 
      ref={(cam) => { 
       this.camera = cam; 
      }} 
      onBarCodeRead={this.onBarCodeRead} 
      style={styles.preview} 
      aspect={Camera.constants.Aspect.fill}> 
      </Camera> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    ... 
}); 

AppRegistry.registerComponent('Scanner',() => Scanner); 

Les deux pages fonctionnent bien et je suis en mesure de me connecter à mon service via la page de connexion. Mais une fois connecté, comment puis-je obtenir le composant racine pour rendre la page Scanner?

Answer 1

La clé ici est que render est appelé à chaque fois qu'un appel à setState est fait:

effectue une fusion peu profonde de NEXTSTATE dans l'état actuel. Il s'agit de la méthode principale que vous utilisez pour déclencher les mises à jour de l'interface utilisateur à partir des gestionnaires d'événements et des rappels de demande de serveur . https://facebook.github.io/react/docs/react-component.html#setstate

mise à jour donc le contenu d'un composant à base de changement d'état (dans ce cas, utilisateur ouvrant une session) peut être réalisé en vérifiant cet état loggedIn et rendu sous condition le contenu.

Consultez le code suivant comme exemple:

import React, { Component } from 'react'; 
import './App.css'; 


const ContentA =() => (
    <div> 
     <h1>Filled with content A</h1> 
    </div> 
); 

const ContentB =() => (
    <div> 
     <h1>Filled with content B</h1> 
    </div> 
); 


class App extends Component { 

    state = { 
     loggedIn: false 
    }; 

    logIn =() => { 
     this.setState({ 
      loggedIn: !this.state.loggedIn 
     }) 
    }; 

    render() { 

    const content = this.state.loggedIn ? <ContentA/> : <ContentB/>; 
    return (
     <div> 
      {content} 
      <button onClick={this.logIn}>Clicky</button> 
     </div> 
    ); 
    } 
} 

export default App; 

Chaque fois que le bouton est cliqué, un appel à setState est fait, et le composant nouveau rendu basé sur la valeur de this.state.loggedIn.

Espérons que cela aide, et bonne chance!