sanhuang/index.tsx

## index.tsx
// 我的

import React, { Component } from 'react';
import {
  Root,
  Container,
  Content,
  Button,
  Right,
  Body,
  Text,
  H2,
  List,
  ListItem,
  ActionSheet,
} from 'native-base';
import Frisbee from 'frisbee';
import ExStorage from 'Ifulife/src/components/ExStorage';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Settings from "./Settings";
import L from 'Ifulife/src/components/Layout';
import styles from 'Ifulife/src/constants/styles';

const api = new Frisbee({
  baseURI: 'http://san.ifulife.com.tw/api',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

export default class ProfileSreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: navigation.state.params.isSignIn ? (
        // 處理清除登入資訊後回到
        <Button transparent
          onPress={() => {
            ExStorage.removeItem("@Ifulife:member");
            navigation.navigate('Home');
          }}
        >
          <Text>登出</Text>
          <FontAwesome style={{paddingRight: 10}} size={20} name="share-square-o" color="#007aff" />
        </Button>
      ) : null,
    }
  };

  constructor(props) {
    super(props)

    this.state = {
      isLoading: true,
      isSignIn: this.props.navigation.getParam('isSignIn'),
      haveCmts: false,
      member: this.props.navigation.getParam('member')
    }

    this._getMemberStorage = this._getMemberStorage.bind(this);
  }

  async _getMemberStorage(): Promise<void> {
    try{
      // let member = null;
      let member = await ExStorage.getItem("@Ifulife:member");
      // console.log(member);

      if ( member !== null ){
        await this.setState({
          member,
          isSignIn: true
        });
      }else{
        await this.promisedSetState({
          member: null,
          isSignIn: false
        });
      }
      await this.promisedSetState({
        isLoading: false
      });

      return true;
    }catch(e) {
      console.error(e);
    }
  }

  // 將目前是否登入傳入
  // async componentDidMount() {
  //   await this._getMemberStorage().done();
  // }

  promisedSetState = (newState) => {
    return new Promise((resolve) => {
      this.setState(newState, () => {
        resolve()
      });
    });
  }

  protected _renderLogin() {
    return (
      <ListItem>
        <Body>
          <H2>用戶, 您好</H2>
          <Text note>若您為社區住戶，請登入以便使用完整功能。</Text>
        </Body>
        <Right>
          <Button small rounded
            onPress={() => {
              this.props.navigation.navigate('Profile_Login');
            }}
          >
            <Text>登入</Text>
          </Button>
        </Right>
      </ListItem>
    )
  }

  protected _renderMemberWithCmts() {
    return (
      <ListItem>
        <Body>
          <H2>{this.state.member.cmt} {this.state.member.unit}住戶 {this.state.member.name},您好</H2>
          <Text note>可使用右側按鈕切換您的社區。</Text>
        </Body>
        <Right>
          <Button small rounded dark
            onPress={() => {
              ActionSheet.show(
                {
                  options: SheetItems,
                  cancelButtonIndex: CANCEL_INDEX,
                  destructiveButtonIndex: DESTRUCTIVE_INDEX,
                  title: "我的社區列表"
                },
                buttonIndex => {
                  this.setState({ clicked: SheetItems[buttonIndex] });
                }
              )
            }
            }
          >
            <Text>切換</Text>
          </Button>
        </Right>
      </ListItem>
    )
  }

  protected _renderMember() {
    return (
      <ListItem>
        <Body>
          <H2>{this.state.member.cmt} {this.state.member.unit}住戶 {this.state.member.name},您好</H2>
          <Text note>使用完畢，您可點選登出確保資料不外洩。</Text>
        </Body>
      </ListItem>
    )
  }


  protected render() {
    let infocoms = null;

    let self = this
    this.props.navigation.addListener('willFocus', async (payload) => {
      await self._getMemberStorage().done();
    });

    if (this.state.isLoading ) {
      return (
        <L.PageLoading />
      )
    }else{
      if (this.state.isSignIn) {
        infocoms = this._renderMember();
      } else {
        infocoms = this._renderLogin();
      }

      return (
        <Root>
          <Container>
          <Content>
            <List>
              {infocoms}
            </List>

            <Settings />

          </Content>
          {<L.IFooter />}
          </Container>
        </Root>
      );
    }

  }
}
	// 我的

	import React, { Component } from 'react';
	import {
	Root,
	Container,
	Content,
	Button,
	Right,
	Body,
	Text,
	H2,
	List,
	ListItem,
	ActionSheet,
	} from 'native-base';
	import Frisbee from 'frisbee';
	import ExStorage from 'Ifulife/src/components/ExStorage';
	import FontAwesome from 'react-native-vector-icons/FontAwesome';
	import Settings from "./Settings";
	import L from 'Ifulife/src/components/Layout';
	import styles from 'Ifulife/src/constants/styles';

	const api = new Frisbee({
	baseURI: 'http://san.ifulife.com.tw/api',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	}
	});

	export default class ProfileSreen extends Component {
	static navigationOptions = ({ navigation }) => {
	return {
	headerRight: navigation.state.params.isSignIn ? (
	// 處理清除登入資訊後回到
	<Button transparent
	onPress={() => {
	ExStorage.removeItem("@Ifulife:member");
	navigation.navigate('Home');
	}}
	>
	<Text>登出</Text>
	<FontAwesome style={{paddingRight: 10}} size={20} name="share-square-o" color="#007aff" />
	</Button>
	) : null,
	}
	};

	constructor(props) {
	super(props)

	this.state = {
	isLoading: true,
	isSignIn: this.props.navigation.getParam('isSignIn'),
	haveCmts: false,
	member: this.props.navigation.getParam('member')
	}

	this._getMemberStorage = this._getMemberStorage.bind(this);
	}

	async _getMemberStorage(): Promise<void> {
	try{
	// let member = null;
	let member = await ExStorage.getItem("@Ifulife:member");
	// console.log(member);

	if ( member !== null ){
	await this.setState({
	member,
	isSignIn: true
	});
	}else{
	await this.promisedSetState({
	member: null,
	isSignIn: false
	});
	}
	await this.promisedSetState({
	isLoading: false
	});

	return true;
	}catch(e) {
	console.error(e);
	}
	}

	// 將目前是否登入傳入
	// async componentDidMount() {
	// await this._getMemberStorage().done();
	// }

	promisedSetState = (newState) => {
	return new Promise((resolve) => {
	this.setState(newState, () => {
	resolve()
	});
	});
	}

	protected _renderLogin() {
	return (
	<ListItem>
	<Body>
	<H2>用戶, 您好</H2>
	<Text note>若您為社區住戶，請登入以便使用完整功能。</Text>
	</Body>
	<Right>
	<Button small rounded
	onPress={() => {
	this.props.navigation.navigate('Profile_Login');
	}}
	>
	<Text>登入</Text>
	</Button>
	</Right>
	</ListItem>
	)
	}

	protected _renderMemberWithCmts() {
	return (
	<ListItem>
	<Body>
	<H2>{this.state.member.cmt} {this.state.member.unit}住戶 {this.state.member.name},您好</H2>
	<Text note>可使用右側按鈕切換您的社區。</Text>
	</Body>
	<Right>
	<Button small rounded dark
	onPress={() => {
	ActionSheet.show(
	{
	options: SheetItems,
	cancelButtonIndex: CANCEL_INDEX,
	destructiveButtonIndex: DESTRUCTIVE_INDEX,
	title: "我的社區列表"
	},
	buttonIndex => {
	this.setState({ clicked: SheetItems[buttonIndex] });
	}
	)
	}
	}
	>
	<Text>切換</Text>
	</Button>
	</Right>
	</ListItem>
	)
	}

	protected _renderMember() {
	return (
	<ListItem>
	<Body>
	<H2>{this.state.member.cmt} {this.state.member.unit}住戶 {this.state.member.name},您好</H2>
	<Text note>使用完畢，您可點選登出確保資料不外洩。</Text>
	</Body>
	</ListItem>
	)
	}


	protected render() {
	let infocoms = null;

	let self = this
	this.props.navigation.addListener('willFocus', async (payload) => {
	await self._getMemberStorage().done();
	});

	if (this.state.isLoading ) {
	return (
	<L.PageLoading />
	)
	}else{
	if (this.state.isSignIn) {
	infocoms = this._renderMember();
	} else {
	infocoms = this._renderLogin();
	}

	return (
	<Root>
	<Container>
	<Content>
	<List>
	{infocoms}
	</List>

	<Settings />

	</Content>
	{<L.IFooter />}
	</Container>
	</Root>
	);
	}

	}
	}