API tools faq
paste
Advertisement
enkf

Untitled

enkf
Jan 22nd, 2020
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.56 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. import {
  3. StyleSheet,
  4. View,
  5. Text,
  6. TouchableOpacity,
  7. BackHandler,
  8. Image,
  9. ScrollView,
  10. ActivityIndicator,
  11. FlatList
  12. } from 'react-native';
  13. import {
  14. Container,
  15. Header,
  16. CardItem,
  17. Left,
  18. Body,
  19. Thumbnail,
  20. } from 'native-base';
  21. import { withNavigation } from 'react-navigation';
  22. import Axios from 'axios';
  23.  
  24. class Home extends React.Component {
  25.  
  26. constructor(props) {
  27. super(props);
  28. this.state = {
  29. isLoading: false,
  30. id: '',
  31. card_member:'',
  32. member_code: '',
  33. referral_code: '',
  34. name: '',
  35. place: '',
  36. date_of_birth: '',
  37. religion: '',
  38. address:'',
  39. phone_number: '',
  40. phone_home: '',
  41. phone_office: '',
  42. image: '',
  43. email: '',
  44. password: '',
  45. data: [],
  46. renders: []
  47.  
  48. };
  49. }
  50.  
  51. static navigationOptions = {
  52. headerStyle: {
  53. headerTintColor: '#E91E63',
  54. },
  55. headerTitleStyle: {
  56. fontWeight: 'bold',
  57. },
  58. };
  59.  
  60. // async componentDidMount(){
  61. // const token = await AsyncStorage.getItem('token')
  62. // // api profile
  63. // const url = 'http://192.168.56.1/vzuu/public/api/members'
  64. // headers = {'Authorization': 'Bearer ' + token,}
  65. // fetch(url, headers, {method:'GET'})
  66. // .then(data=>data.json())
  67. // .then(res=> {
  68. // console.log(res.results.members);
  69. // // dari selesai fetching api profile
  70.  
  71. // setTimeout(()=>{this.setState({isLoading:false})},100)
  72. // this.setState({memberSource: res.results.members})
  73. // })
  74. // .catch(err=>console.warn({err}))
  75. // }
  76.  
  77. ComponentWillMount() {
  78. BackHandler.addEventListener('hardwareBackPress', () => {
  79. if (!this.onMainScreen()) {
  80. this.goBack();
  81. return true;
  82. }
  83. return false;
  84. });
  85. }
  86.  
  87.  
  88.  
  89. async componentDidMount(){
  90. const token = await AsyncStorage.getItem('token')
  91. headers = {'Authorization': 'Bearer ' + token }
  92. this.makeRemoteRequest();
  93. }
  94. makeRemoteRequest = () => {
  95.  
  96. // api profile
  97. const url = 'http://192.168.56.1/vzuu/public/api/members'
  98. // headers = {'Authorization': 'Bearer ' + token }
  99. fetch(url, headers, {method:'GET'})
  100. .then(data=>data.json())
  101. .then(res=> {
  102. console.log(res.results.members);
  103. // dari selesai fetching api profile
  104.  
  105. setTimeout(()=>{this.setState({loading:false})},1000)
  106. this.setState({
  107. data: res.results.members,
  108. renders: res.results.members.data,
  109. })
  110. console.log(this.state.data);
  111. })
  112. .catch(err=>console.warn({err}))
  113. }
  114.  
  115. render() {
  116. return (
  117. <Container>
  118. <View>
  119. <Header style={{ backgroundColor: '#E91E63' }} />
  120. {this.state.isLoading
  121. ? <ActivityIndicator color='#E91E63' size='large' />
  122. :
  123. <ScrollView>
  124.  
  125. <View style={{ flex: 1, alignItems: 'center' }}>
  126. <Text style={{ fontSize: 16 }}>{this.state.curTime}</Text>
  127. </View>
  128. <CardItem>
  129. <View style={{ marginHorizontal: 10 }}></View>
  130. <FlatList
  131. data={this.state.renders}
  132. renderItem={({ item }) => (
  133. <Left>
  134. {/* <Thumbnail
  135. style={{ width: 80, height: 80 }}
  136. source={{uri : this.state.image}}
  137. /> */}
  138. <Body>
  139. <Text style={styles.text}>{item.name}</Text>
  140. <Text style={styles.text}>{item.phone_number}</Text>
  141. {/* <Text>Jumlah Point</Text> */}
  142. </Body>
  143. </Left>
  144. )}
  145. />
  146. </CardItem>
  147. <View
  148. style={{
  149. flexDirection: 'row',
  150. flexWrap: 'wrap',
  151. marginHorizontal: 50,
  152. marginTop: 50,
  153. }}></View>
  154. <View
  155. style={{
  156. flexDirection: 'row',
  157. flexWrap: 'wrap',
  158. marginHorizontal: 18,
  159. marginTop: 18,
  160. }}>
  161. <View
  162. style={{
  163. justifyContent: 'space-between',
  164. flexDirection: 'row',
  165. width: '100%',
  166. marginBottom: 18,
  167. }}>
  168. <View>
  169. <TouchableOpacity onPress={() => this.props.navigation.navigate('treatment')}>
  170. <View
  171. style={{
  172. width: 100,
  173. height: 100,
  174. borderWidth: 1,
  175. borderColor: '#EFEFEF',
  176. borderRadius: 18,
  177. }}>
  178. <Image
  179. source={require('../asset/images/color/service.png')}
  180. style={{ height: 80, width: 100, flex: 1 }}
  181. />
  182. </View>
  183. <Text
  184. style={{
  185. fontSize: 12,
  186. fontWeight: 'bold',
  187. textAlign: 'center',
  188. color: '#E91E63',
  189. }}>
  190. Treatment
  191. </Text>
  192. </TouchableOpacity>
  193. </View>
  194. <View>
  195. <TouchableOpacity onPress={() => this.props.navigation.navigate('booking')}>
  196. <View
  197. style={{
  198. width: 100,
  199. height: 100,
  200. borderWidth: 1,
  201. borderColor: '#EFEFEF',
  202. borderRadius: 18,
  203. }}>
  204. <Image
  205. source={require('../asset/images/color/booking.png')}
  206. style={{ height: 80, width: 100, flex: 1 }}
  207. />
  208. </View>
  209. <Text
  210. style={{
  211. fontSize: 12,
  212. fontWeight: 'bold',
  213. textAlign: 'center',
  214. color: '#E91E63',
  215. }}>
  216. Booking
  217. </Text>
  218. </TouchableOpacity>
  219. </View>
  220. <View>
  221. <TouchableOpacity onPress={() => this.props.navigation.navigate('promotion')}>
  222. <View
  223. style={{
  224. width: 100,
  225. height: 100,
  226. borderWidth: 1,
  227. borderColor: '#EFEFEF',
  228. borderRadius: 18,
  229. }}>
  230. <Image
  231. source={require('../asset/images/color/promo.png')}
  232. style={{ height: 80, width: 100, flex: 1 }}
  233. />
  234. </View>
  235. <Text
  236. style={{
  237. fontSize: 12,
  238. fontWeight: 'bold',
  239. textAlign: 'center',
  240. color: '#E91E63',
  241. }}>
  242. Promotion
  243. </Text>
  244. </TouchableOpacity>
  245. </View>
  246. </View>
  247. </View>
  248.  
  249. <View
  250. style={{
  251. flexDirection: 'row',
  252. flexWrap: 'wrap',
  253. marginHorizontal: 18,
  254. marginTop: 18,
  255. }}>
  256. <View
  257. style={{
  258. justifyContent: 'space-between',
  259. flexDirection: 'row',
  260. width: '100%',
  261. marginBottom: 18,
  262. }}>
  263. <View>
  264. <TouchableOpacity onPress={() => this.props.navigation.navigate('point')}>
  265. <View
  266. style={{
  267. width: 100,
  268. height: 100,
  269. borderWidth: 1,
  270. borderColor: '#EFEFEF',
  271. borderRadius: 18,
  272. }}>
  273. <Image
  274. source={require('../asset/images/color/point.png')}
  275. style={{ height: 80, width: 100, flex: 1 }}
  276. />
  277. </View>
  278. <Text
  279. style={{
  280. fontSize: 12,
  281. fontWeight: 'bold',
  282. textAlign: 'center',
  283. color: '#E91E63',
  284. }}>
  285. Point
  286. </Text>
  287. </TouchableOpacity>
  288. </View>
  289. <View>
  290. <TouchableOpacity>
  291. <View
  292. style={{
  293. width: 100,
  294. height: 100,
  295. borderWidth: 1,
  296. borderColor: '#EFEFEF',
  297. borderRadius: 18,
  298. }}>
  299. <Image
  300. source={require('../asset/images/color/spin.png')}
  301. style={{ height: 80, width: 100, flex: 1 }}
  302. />
  303. </View>
  304. <Text
  305. style={{
  306. fontSize: 12,
  307. fontWeight: 'bold',
  308. textAlign: 'center',
  309. color: '#E91E63',
  310. }}>
  311. Spin
  312. </Text>
  313. </TouchableOpacity>
  314. </View>
  315. <View>
  316. <TouchableOpacity onPress={() => this.props.navigation.navigate('contact')}>
  317. <View
  318. style={{
  319. width: 100,
  320. height: 100,
  321. borderWidth: 1,
  322. borderColor: '#EFEFEF',
  323. borderRadius: 18,
  324. }}>
  325. <Image
  326. source={require('../asset/images/color/contact.png')}
  327. style={{ height: 80, width: 100, flex: 1 }}
  328. />
  329. </View>
  330. <Text
  331. style={{
  332. fontSize: 12,
  333. fontWeight: 'bold',
  334. textAlign: 'center',
  335. color: '#E91E63',
  336. }}>
  337. Contact
  338. </Text>
  339. </TouchableOpacity>
  340. </View>
  341. </View>
  342. </View>
  343.  
  344. </ScrollView>
  345. }
  346. </View>
  347. </Container>
  348. );
  349. }
  350. }
  351.  
  352.  
  353. export default withNavigation(Home);
  354. const styles = StyleSheet.create({
  355. container: {
  356. flex: 1,
  357. justifyContent: 'center',
  358. alignItems: 'center',
  359. },
  360. text: { fontSize: 18, fontWeight:'bold', color: '#E91E63', alignItems: 'center', justifyContent: 'center' }
  361. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!