Created
June 10, 2019 05:44
-
-
Save sanhuang/c8368948a6d70f967c7ee5953a2ab2b1 to your computer and use it in GitHub Desktop.
React-Native片段
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 我的 | |
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