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 ( <Button title=“登入” onPress={() => { //點選登入 this._signInAsync(); }} /> ); } }

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