2016-07-08 5 views
1

Я хочу показать экран входа только один раз, когда пользователь не вошел в систему. И каждый раз, когда приложение запускается, если пользователь регистрируется, запускается с экрана поиска, но он продолжает запускать с Экран входа в систему. Как я могу это исправить? Логика навигации содержится в файле index.android.js:React-native: связь между компонентами

import React, { Component } from 'react'; 
import TextField from 'react-native-md-textinput'; 
import { 
    AppRegistry, 
    Navigator, 
    BackAndroid, 
    StyleSheet, 
    Text, 
    TouchableHighlight 
} from 'react-native'; 

var Login = require('./LoginPage'); 
var Search = require('./SearchPage'); 

class SymptomaReact extends Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     logged: false 
    } 
    } 

    loggedIn(){ 
    this.setState({logged:true}); 
    } 

    renderScene(route, navigator) { 
    return <route.component navigator={navigator} logged={this.logged} loggedIn={this.loggedIn}{...route.passProps} /> 
    } 

    configureScene(route, routeStack){ 
    return Navigator.SceneConfigs.FloatFromRight; 
    } 

    render() { 
    if (!this.state.logged){ 
     return (
     <Navigator 
      configureScene={ this.configureScene } 
      style={{ flex:1 }} 
      initialRoute={{component: Login}} 
      renderScene={ this.renderScene } 
     /> 
    ) 
    }else { 
     return (
     <Navigator 
      configureScene={ this.configureScene } 
      style={{ flex:1 }} 
      initialRoute={{ component: Search }} 
      renderScene={ this.renderScene } 
      navigationBar={ 
       <Navigator.NavigationBar 
       style={styles.nav} 
       routeMapper={NavigationBarRouteMapper} /> 
      } 
     /> 
    ) 
    } 
    } 
} 

LoginPage.js

`const API="url"; 
var TOKEN = ""; 
var Search = require('./SearchPage'); 

`class LoginPage extends Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     email: '', 
     password:'', 
     buttonState: 'idle' 
    }; 
    this.attemptLogin = this.attemptLogin.bind(this) 
    } 

    attemptLogin(){ 
    console.log(this.props.logged); 
    this.setState({buttonState: 'busy'}) 
    fetch(API+this.state.email+"&password=" + this.state.password) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     if (responseData.message === 'success'){ 
      TOKEN = responseData.results[0].token; 
      this.setState({buttonState: 'success'}) 
      this.props.navigator.push({ 
       component: Search, 
       passProps: { 
       token: TOKEN, 
       logged: true, 
       loggedIn: this.props.loggedIn 
       }, 
      }) 
     } 
     else { 
      this.setState({buttonState: 'idle'}) 
     } 
    }).done(); 
    } 

    render() { 
    return (
     <ScrollView contentContainerStyle = {styles.container}> 
      <Image 
      source = {require('./logo.png')} 
      style={styles.logo} 
      /> 
      <TextField 
      style={styles.input} 
      label={'Email'} 
      onSubmitEditing={(event) => {this.refs.pass.focus()}} 
      highlightColor={'#009FE3'} 
      onChangeText={(text) => this.setState({email : text})} 
      value={this.state.email} 
      /> 
      <TextField 
      ref='pass' 
      style={styles.input} 
      returnKeyType='send' 
      secureTextEntry={true} 
      label={'Password'} 
      highlightColor={'#009FE3'} 
      onChangeText={(text) => this.setState({password : text})} 
      onSubmitEditing={(event) => this.attemptLogin()} 
      value={this.state.password} 
      /> 
     </ScrollView> 
    ); 
    } 
    } 

SearchPage.js

class SearchPage extends Component{ 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1,r2) => r1 !== r2 
    }); 
    this.state = { 
     symptoms: [], 
     query: '', 
     ds: [], 
     dataSource: ds 
    }; 
    } 

    getSuggestions(query) { 
    fetch(API+this.props.token+"&query="+query).then(res => res.json()).then(json => { 
     this.setState({ symptoms: json.results }); 
    }); 
    return this.state.symptoms.filter(symptom => symptom.label); 
    } 

    componentDidMount(){ 
    console.log("Received props "+this.props.logged); 
    } 

    componentWillReceiveProps(){ 
    this.setState({ 
     dataSource:this.state.dataSource.cloneWithRows(this.state.ds), 
    }) 
    } 

    componentWillMount(){ 
    this.setState({ 
     dataSource:this.state.dataSource.cloneWithRows(this.state.ds), 
    }) 
    } 

    updateListItems(label){ 
    this.setState({ query: '', ds: this.state.ds.push(label)}); 
     console.log(this.state.ds + " 1"); 
    } 

    render() { 
    const { query } = this.state; 
    const symptoms = this.getSuggestions(query); 
    const comp = (s, s2) => s.toLowerCase().trim() === s2.toLowerCase().trim(); 
    return (
     <View style={styles.container}> 
     <View style={styles.autocomplete}> 
     <Autocomplete 
      autoCapitalize="none" 
      autoCorrect={false} 
      blurOnSubmit={true} 
      containerStyle={styles.autocompleteContainer} 
      data={symptoms.length === 1 && comp(query, symptoms[0].label) ? [] : symptoms} 
      defaultValue={query} 
      onChangeText={text => this.setState({ query: text })} 
      placeholder="Enter your symptoms" 
      renderItem={({ index, label, type, value }) => (
      <TouchableOpacity onPress={() => this.updateListItems(label)}> 
       <Text style={styles.itemText}> 
       {label} 
       </Text> 
      </TouchableOpacity> 
      )} 
     /> 
     </View> 
     <View style={styles.listview}> 
      <ListView 
       dataSource = {this.state.dataSource} 
       renderRow = {(rowData) => <Text>{rowData}</Text>} 
       enableEmptySections={true}> 
      </ListView> 
      </View> 
     </View> 
    ); 
    } 
} 
+0

Можете ли вы попробовать удалить несвязанный код? Не так много людей хотят проверить столько кода для ответа на вопрос. –

ответ

0

В componentDidMount вашего компонента SymptomaReact вы РЕКОМЕНДУЕМЫМ проверьте текущий статус вошедшего в систему. Теперь он установлен в конструктор в false и не обновляется нигде, если вы не войдете снова через компонент входа. Состояние не сохраняется между отключением приложений и запусками.

Итак, вы должны сохранить состояние входа в постоянное хранилище и перезагрузить его в компоненте componentDidMount.

В идеале вы также можете абстрагировать это в магазине, который заботится о логике, и вы просто получаете результат в своем компоненте и работаете с ним.

Смежные вопросы