加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

parse.com – 对本机和解析做出反应,当前用户在登录后为空并且cm

发布时间:2020-12-15 05:05:31 所属栏目:百科 来源:网络整理
导读:我遇到了React Native和Parse JS SDK的问题. 我正在使用 ParseReact 我已经建立了登录,注册和主视图,注册和登录工作正常,但在我登录后 – 指向主视图,当我在我的模拟器中刷新应用程序(CMD R)时,它再次将我带回登录视图,我应该被带到主视图. 如您所见,我为ini
我遇到了React Native和Parse JS SDK的问题.
我正在使用 ParseReact

我已经建立了登录,注册和主视图,注册和登录工作正常,但在我登录后 – >指向主视图,当我在我的模拟器中刷新应用程序(CMD R)时,它再次将我带回登录视图,我应该被带到主视图.

如您所见,我为initialComponent设置了一个状态:

this.state = {        
      InitialComponent : ((!currentUser) ? LoginView : MainView)
};

这允许我的导航器检查currentUser是否为null然后加载LoginView作为初始组件,否则设置主视图(用户登录)

'use strict';
var React = require('react-native');
var MainView = require('./MainView');
var LoginView = require('./LoginView');


var Parse = require('parse').Parse;
var ParseReact = require('parse-react');
Parse.initialize("mykey","mykey");


var {
  AppRegistry,StyleSheet,Text,View,TextInput,TouchableHighlight,Navigator,Component
} = React;


class MyApp extends Component {
    constructor(props) {
      super(props);

      var currentUser = Parse.User.current();
      console.log('Current User:' + currentUser);

      this.state = {        
        InitialComponent : ((!currentUser) ? LoginView : MainView)
      };
    }

   render() {
        return (
            <Navigator
              initialRoute={{
                 name : 'StatusList',component: this.state.InitialComponent
              }}
              configureScene = {() =>{
                return Navigator.SceneConfigs.FloatFromRight;
              }}
              renderScene={(route,navigator) =>{
                if(route.component) {
                  return React.createElement(route.component,{navigator});
                }
              }}/>

        );
    }
}

AppRegistry.registerComponent('MyApp',function() { return MyApp });

在我的Xcode控制台中,即使我之前已经登录,每次刷新后我仍然保持当前用户为空.在我的解析应用程序中,我可以看到已创建新会话.

在我的LoginView中.

'use strict';

var React = require('react-native');
var SignUp = require('./SignUp');
var MainView = require('./MainView');

var {
  AppRegistry,AlertIOS,Component
} = React;

var styles = StyleSheet.create({
  container : {
      flex: 1,padding: 15,marginTop: 30,backgroundColor: '#0179D5',},text: {
    color: '#000000',fontSize: 30,margin: 100
  },headingText: {
    color: '#fff',fontSize: 40,fontWeight: '100',alignSelf: 'center',marginBottom: 20,letterSpacing: 3
  },textBox: {
    color: 'white',backgroundColor: '#4BB0FC',borderRadius: 5,borderColor: 'transparent',padding:10,height:40,borderWidth: 1,marginBottom: 15,greenBtn: {
    height: 36,padding: 10,backgroundColor: '#2EA927',justifyContent: 'center'
  },signUpButton: {
    marginTop: 10,height: 36,backgroundColor: '#FF5500',justifyContent: 'center'

  },btnText: {
    color : '#fff',fontSize: 15,alignSelf: 'center'
  },buttonText: {
    fontSize: 18,color: 'white',loginForm : {
      flex:1,marginTop:100
   }
});

class LoginView extends Component {

    constructor(props) {
      super(props);
      this.state = {
        username: '',password: ''
      };

    }

    checkLogin() {
        var success = true;
        var state = this.state;
        for(var key in state){
          if(state[key].length <= 0){
            success = false;
          }
        }

        if(success) {
          this._doLogin();
        } else {
          //show alert
          AlertIOS.alert('Error','Please complete all fields',[{text: 'Okay',onPress: () => console.log('')}]
          );
        }
    }

    goMainView() {
      this.props.navigator.push({
        title: "Home",component: MainView
      });
    }

    goSignUp() {
      this.props.navigator.push({
        title: "Sign Up",component: SignUp
      });
    }

    _doLogin() {
      var parent = this;
      Parse.User.logIn(this.state.username,this.state.password,{
        success: function(user) {
            parent.goMainView();
        },error: function(user,error) {
          AlertIOS.alert('Login Error',error.message,onPress: () => console.log('')}]
          );
        }
      });
    }

    onUsernameChanged(event) {
      this.setState({ username : event.nativeEvent.text });
    }

    onPasswordChanged(event) {
      this.setState({ password : event.nativeEvent.text });
    }

    render() {
       return(
          <View style={styles.container}>
            <View style={styles.loginForm}>
                <Text style={styles.headingText}>
                  MyStatus
                </Text>

               <TextInput style={styles.textBox}
                placeholder='Username'
                onChange={this.onUsernameChanged.bind(this)}
                placeholderTextColor='#fff'
                autoCorrect={false}
               >
               </TextInput>

               <TextInput style={styles.textBox}
                placeholder='Password'
                onChange={this.onPasswordChanged.bind(this)}
                placeholderTextColor='#fff'
                password={true}
               >
               </TextInput>

               <TouchableHighlight style={styles.greenBtn}
                  underlayColor='#33B02C'
                  onPress={this.checkLogin.bind(this)}>
                    <Text style={styles.btnText}>Login</Text>

                </TouchableHighlight>


                <TouchableHighlight style={styles.signUpButton}
                  underlayColor='#D54700'
                  onPress={this.goSignUp.bind(this)}>
                    <Text style={styles.btnText}>Sign Up</Text>

                </TouchableHighlight>
            </View>

          </View>
        );
    }
}

module.exports = LoginView;

我这样做是错误的吗?好心劝告.或者解析localstorage / session是否有问题?

因为React Native只提供异步存储,所以我们不得不使Parse.User.current()成为一个返回Promise的异步调用.由于您已经在使用Parse React,因此处理它非常容易.根据用户是否登录而更改的组件(MyApp)应订阅ParseReact.currentUser.它与当前用户保持同步,并允许您的组件在用户登录或注销时自动更新.有关此演示,请查看GitHub仓库中的AnyBudget demo

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读