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 - 有条件地呈现视图

回答

相关问题