React native React native：组件之间的通信

我只想在用户未登录时显示一次登录屏幕。然后每次启动应用程序时，如果用户已登录，则从搜索屏幕启动，但它会从登录屏幕继续启动。我怎样才能解决这个问题？导航逻辑包含在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} />
            }
        />
      )
    }
  }
}

import React，{Component}来自'React'；
从“react native md textinput”导入TextField；
进口{
评估学，
领航员，
BackAndroid，
样式表，
文本，
可触摸高光
}从“反应本机”；
var Login=require（'./LoginPage'）；
var Search=require（“./SearchPage”）；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
记录：错误
}
}
loggedIn（）{
this.setState（{logged:true}）；
}
renderScene（路线、导航器）{
返回
}
配置场景（路由、路由堆栈）{
从右侧返回Navigator.sceneconfig.floatfrom；
}
render（）{
如果（！this.state.logged）{
返回(
)
}否则{
返回(
)
}
}
}

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

`const API=“url”；
var TOKEN=“”；
var Search=require（“./SearchPage”）；
`类LoginPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
按钮状态：“空闲”
};
this.attemptLogin=this.attemptLogin.bind（this）
}
attemptLogin（）{
console.log（this.props.logged）；
this.setState（{buttonState:'busy'}）
获取（API+this.state.email+“&password=“+this.state.password”）
.then（（response）=>response.json（））
.然后（（响应数据）=>{
如果（responseData.message==='success'）{
令牌=响应数据。结果[0]。令牌；
this.setState（{buttonState:'success'}）
这个是.props.navigator.push({
组件：搜索，
通行证：{
令牌：令牌，
是的，
loggedIn:this.props.loggedIn
},
})
}
否则{
this.setState（{buttonState:'idle'}）
}
}).完成（）；
}
render（）{
返回(
{this.refs.pass.focus（）}
highlightColor={'#009FE3'}
onChangeText={（text）=>this.setState（{email:text}）}
值={this.state.email}
/>
this.setState（{password:text}）}
onSubmitEditing={（事件）=>this.attemptLogin（）}
值={this.state.password}
/>
);
}
}

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

类搜索页面扩展组件{
建造师（道具）{
超级（道具）；
const ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2
});
此.state={
症状：[]，
查询：“”，
ds:[]，
数据源：ds
};
}
获取建议（查询）{
获取（API+this.props.token+”&query=“+query）。然后（res=>res.json（））。然后（json=>{
this.setState（{symptoms:json.results}）；
});
返回this.state.symptoms.filter（symptom=>symptom.label）；
}
componentDidMount（）{
console.log（“已接收道具”+此.props.logged）；
}
组件将接收道具（）{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（this.state.ds），
})
}
组件willmount（）{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（this.state.ds），
})
}
更新列表（标签）{
this.setState（{query:''，ds:this.state.ds.push（label）}）；
console.log（this.state.ds+“1”）；
}
render（）{
const{query}=this.state；
const symptoms=this.getSuggestions（查询）；
常量comp=（s，s2）=>s.toLowerCase（）.trim（）==s2.toLowerCase（）.trim（）；
返回(
this.setState（{query:text}）}
占位符=“输入您的症状”
renderItem={（{索引、标签、类型、值}）=>(
this.updateListItems（标签）}>
{label}
)}
/>
{rowData}}
enableEmptySections={true}>
);
}
}

在症状区CT组件的组件安装中，您应该检查当前登录状态。现在，它在构造函数中设置为false，并且不会在其他任何地方更新，除非您通过登录组件再次登录。该状态在应用程序关闭和启动之间不会持续

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

---

理想情况下，您还可以将其抽象到负责逻辑的存储中，然后在组件本身中获取结果并使用它。

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

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

---

理想情况下，您还可以将其抽象到负责逻辑的存储中，然后在组件中获得结果并使用它。

您可以尝试删除不相关的代码吗？没有太多人想检查这么多代码来回答问题。你能尝试删除不相关的代码吗？没有太多人想检查这么多代码来回答问题。