rn身份认证

Rn身份认证

首先创建My页面

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 (      <View style={styles.container}>        <View          style={{            height: 200,            width: "100%",            flexDirection: "row",            alignItems: "center"          }}        >          <Image            style={{              width: 60,              height: 60,              borderRadius: 65            }}            source={require("./img/a2.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>
        {//根据用户状态，判断是否要显示注销按钮   （一登录：显示，未登录：不显示）        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 (      <View style={styles.container}>        <TextInput placeholder="请输入用户名" onChangeText={this.changeName} />        <TextInput placeholder="请输入密码" onChangeText={this.changePsw} />        <Text style={styles.welcome}>          {this.state.name}          {this.state.psw}        </Text>        <Button          title="登录"          onPress={() => {            //点击登录            this._signInAsync();          }}        />      </View>    );  }}
const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: "#F5FCFF"  },  welcome: {    fontSize: 20,    textAlign: "center",    margin: 10  }});