Skip to content

Instantly share code, notes, and snippets.

@sanhuang
Created June 10, 2019 05:44
Show Gist options
  • Save sanhuang/c8368948a6d70f967c7ee5953a2ab2b1 to your computer and use it in GitHub Desktop.
Save sanhuang/c8368948a6d70f967c7ee5953a2ab2b1 to your computer and use it in GitHub Desktop.
React-Native片段
// 我的
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>
);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment