React Native - 有條件地呈現視圖

我有一個我正在開發的反應本機應用程序。現在我希望它有兩個意見。登錄頁面和主頁面。它到目前爲止是這樣的：React Native - 有條件地呈現視圖

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

應用程序/組件/ 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({ 
    ... 
});

應用程序/組件/ 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);

這兩個頁面都可以正常工作，我可以通過登錄頁面登錄到我的服務。但是，一旦我登錄，我怎樣才能讓根組件呈現掃描器頁面？

來源

2017-04-12 Jordan

這裏的關鍵是，渲染是對setState調用由每次叫：

執行nextState的淺合併到當前的狀態。這是您用來觸發事件處理程序的UI更新和服務器請求回調的主要方法。 https://facebook.github.io/react/docs/react-component.html#setstate

因此，基於狀態改變更新的成分的含量（在該情況下，在用戶記錄）可以通過檢查此的loggedIn狀態和有條件地呈現內容來實現。

考慮下面的代碼作爲示例：

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;

每次按鈕被點擊時，對setState進行呼叫時，與該組件重新呈現基於this.state.loggedIn的值。

希望這會有所幫助，祝你好運！

來源

2017-04-12 22:59:14

React Native - 有條件地呈現視圖

回答

相關問題