Question

我想在用户未登录时只显示一次登录屏幕。然后每次启动应用程序时，如果用户已登录，则从“搜索”屏幕开始，但它会一直从“登录”屏幕启动。我怎么能解决这个问题？导航逻辑包含在index.android.js文件中：

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

Answer 1

在SymptomaReact组件的componentDidMount中，您应该检查当前登录状态。现在它在构造函数中设置为false，除非您通过登录组件再次登录，否则不会在其他任何位置更新。应用程序关闭和启动之间的状态不会持久。

因此，您应该将登录状态保存到持久存储并重新加载componentDidMount中的状态。

理想情况下，您还要在一个负责逻辑的商店中抽象出来，然后您只需在组件中获得结果并使用它。

React-native：组件之间的通信

1 个答案: