React-native 登陆注册验证

import React, { Component } from “react”;
import { StyleSheet, Text, View, Image, TouchableHighlight,Button,AsyncStorage } from “react-native”;
import { createSwitchNavigator } from “react-navigation”;
import Login from “./Login”;

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

//用户状态判断：默认为false未登录
this.state = {
  userToken: false, //用户判断是否登录
  username: "" //用户获取用户登录后的用户信息
};

}

componentDidMount() {
this._bootstrapAsync();
}

//获取用户状态
_bootstrapAsync = async () => {
const name = await AsyncStorage.getItem(“userToken”); //获取SP中保存的信息

//判断用户状态转换为userToken变量
if (name && name.length > 0) {
  this.setState({
    userToken: true,
    username: name
  });
} else {
  this.setState({
    userToken: false,
    username: ""
  });
}

};

//注销
_signOutAsync = async () => {
await AsyncStorage.clear(); //情况SP中保存的信息

//将状态还原为false未登录
this.setState({
  userToken: false,
  username: ""
});

};

render() {
return (

Welcome to React Native My!
<View
style={{
height: 200,
width: “100%”,
backgroundColor: “#FF0000”,
flexDirection: “row”,
alignItems: “center”
}}
>
<Image
style={{
width: 60,
height: 60,
borderRadius: 65
}}
source={require("./…/img/d4.png")}
/>
{//根据用户状态，判断是否要显示用户名和未登录按钮（已登录：显示用户名称，未登录：显示未登录按钮）

      this.state.userToken ? (
        <Text style={{ fontSize: 18 }}>
          {
            this.state.username //动态显示用户登录信息
          }
        </Text>
      ) : (
        <TouchableHighlight
          onPress={() => {
            //调用跳转登录页面
            this.props.navigation.navigate("Login");
          }}
        >
          <Text style={{ fontSize: 18 }}>未登录</Text>
        </TouchableHighlight>
      )}
    </View>
    <View
      style={{
        height: 50,
        width: "100%",
        backgroundColor: "#00FF00",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginTop: 10
      }}
    >
      <Text style={{ fontSize: 18 }}>记录</Text>
      <Text style={{ fontSize: 18 }}>{">"}</Text>
    </View>
    <View
      style={{
        height: 50,
        width: "100%",
        backgroundColor: "#00FF00",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginTop: 10,
        marginBottom: 10
      }}
    >
      <Text style={{ fontSize: 18 }}>账单</Text>
      <Text style={{ fontSize: 18 }}>{">"}</Text>
    </View>

    {//根据用户状态，判断是否要显示注销按钮   （一登录：显示，未登录：不显示）
    this.state.userToken && (
      <Button
        title="注销"
        onPress={() => {
          //调用注销方法
          this._signOutAsync();
        }}
      />
    )}
  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#F5FCFF”
},
welcome: {
fontSize: 20,
textAlign: “center”,
margin: 10
}
});

const MyRoute = createSwitchNavigator({
My: My,
Login: Login
});

export default MyRoute;

//注册界面
import React, { Component } from “react”;
import {
StyleSheet,
Text,
View,
Button,
AsyncStorage,
TextInput
} from “react-native”;

export default class Login extends Component {
constructor(props) {
super(props);

this.state = {
  name: "",
  psw: ""
};

}
//登录
_signInAsync = async () => {
await AsyncStorage.setItem(“userToken”, this.state.name); //获取用户数据保存到SP文件
this.props.navigation.navigate(“My”); //跳转或个人中心页面
};

//获取用户名，保存到state
changeName = text => {
this.setState({
name: text
});
};

//获取密码，保存到state
changePsw = text => {
this.setState({
psw: text
});
};

render() {
return (

{ this.state.name}
{this.state.psw}

<Button
title=“登录”
onPress={() => {
//点击登录
this._signInAsync();
}}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: “#F5FCFF”
},
welcome: {
fontSize: 20,
textAlign: “center”,
margin: 10
}
});

React-native 登陆注册验证

猜你喜欢