API tools faq
paste
Advertisement
thanhhang54833

code_marketing

thanhhang54833
Mar 21st, 2018
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.58 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from "react";
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Button,
  8. Alert,
  9. Dimensions,
  10. Image,
  11. Animated,
  12. Easing,
  13. LayoutAnimation,
  14. NativeModules,
  15. TextInput
  16. } from "react-native";
  17.  
  18. const { UIManager } = NativeModules;
  19.  
  20. UIManager.setLayoutAnimationEnabledExperimental &&
  21. UIManager.setLayoutAnimationEnabledExperimental(true);
  22.  
  23. let deviceWidth = Dimensions.get("window").width;
  24. let deviceHeight = Dimensions.get("window").height;
  25.  
  26. export default class AppHome extends Component {
  27. constructor(props) {
  28. super(props);
  29. this.state = { x:null,y:null,
  30. size: new Animated.Value(0),
  31. size1: new Animated.Value(0),
  32. size2: new Animated.Value(0),
  33. sizenho: new Animated.Value(0),
  34. screen1: true,
  35. screen2:false,
  36. time: new Animated.Value(0),
  37. tab1:true,
  38. tab2:false };
  39. }
  40. componentDidMount() {
  41. const anim1 = Animated.timing(this.state.size, {
  42. toValue: 1,
  43. duration: 1000,
  44. easing: Easing.bounce
  45. }).start();
  46.  
  47. const anim2 = Animated.timing(this.state.size1, {
  48. toValue: 1,
  49. duration: 500,
  50. easing: Easing.ease
  51. }).start();
  52.  
  53. const animnho = Animated.timing(this.state.sizenho, {
  54. toValue: 1,
  55. duration: 1000,
  56. easing: Easing.bounce
  57. });
  58. animnho.start();
  59. //Animated.stagger(200, [anim1, anim2]).start();
  60. }
  61.  
  62. onPreeScreen1 = () => {
  63. this.state.size.setValue(0);
  64. this.state.size1.setValue(0);
  65. this.state.sizenho.setValue(0);
  66. this.state.time.setValue(0);
  67. const ani1 = Animated.timing(this.state.size, {
  68. toValue: 1,
  69. duration: 1000,
  70. easing: Easing.bounce
  71. });
  72. const ani2 = Animated.timing(this.state.size1, {
  73. toValue: 1,
  74. duration: 200,
  75. easing: Easing.ease
  76. });
  77.  
  78. Animated.timing(this.state.sizenho, {
  79. toValue: 1,
  80. duration: 1000,
  81. easing: Easing.bounce
  82. }).start();
  83.  
  84. Animated.stagger(0, [ani1, ani2]).start();
  85.  
  86. Animated.timing(this.state.time, {
  87. toValue: 1,
  88. duration: 1000,
  89. easing: Easing.bounce
  90. }).start();
  91.  
  92. if (this.state.screen1 == true) {
  93. this.setState({
  94. screen1: false
  95. });
  96. } else {
  97. this.setState({
  98. screen1: true
  99. });
  100. }
  101.  
  102. if (this.state.screen2 == true) {
  103. this.setState({
  104. screen2: false
  105. });
  106. } else {
  107. this.setState({
  108. screen2: true
  109. });
  110. }
  111. };
  112.  
  113. onPreeScreen2 = () => {
  114. this.state.size.setValue(0);
  115. this.state.size1.setValue(0);
  116. this.state.sizenho.setValue(0);
  117. this.state.time.setValue(0);
  118.  
  119. const ani1 = Animated.timing(this.state.size, {
  120. toValue: 1,
  121. duration: 500,
  122. easing: Easing.ease
  123. }).start();
  124. const ani2 = Animated.timing(this.state.size1, {
  125. toValue: 1,
  126. duration: 500,
  127. easing: Easing.ease
  128. }).start();
  129.  
  130. Animated.timing(this.state.sizenho, {
  131. toValue: 1,
  132. duration: 1000,
  133. easing: Easing.bounce
  134. }).start();
  135. //Animated.stagger(200, [ani1, ani2]).start();
  136.  
  137. Animated.timing(this.state.time, {
  138. toValue: 1,
  139. duration: 1000,
  140. easing: Easing.bounce
  141. }).start();
  142.  
  143. if (this.state.screen1 == true) {
  144. this.setState({ screen1: false });
  145. } else {
  146. this.setState({ screen1: true });
  147. }
  148.  
  149. if (this.state.screen2 == true) {
  150. this.setState({ screen2: false });
  151. } else {
  152. this.setState({ screen2: true });
  153. }
  154. };
  155.  
  156. onPress(evt) {
  157. const { locationX, locationY } = evt.nativeEvent;
  158. this.setState({ x: locationX, y: locationY });
  159. console.log(locationX, locationY);
  160. }
  161.  
  162. onMove(evt) {
  163. const { locationX, locationY } = evt.nativeEvent;
  164. const { x, y } = this.state;
  165. if (1.5 * (locationX - x) / deviceWidth > 0.2) {
  166. if(this.state.tab1=true)
  167. {
  168. this.setState({
  169. tab1:false,
  170. tab2:true
  171. });
  172. }
  173. }
  174.  
  175. if (1.5 * (locationX - x) / deviceWidth < -0.2) {
  176. if (this.state.tab2 = true) {
  177. this.setState({
  178. tab1: true,
  179. tab2:false
  180. });
  181. }
  182. }
  183.  
  184. }
  185.  
  186. render() {
  187. const size = this.state.size.interpolate({
  188. inputRange: [0, 0.5, 1],
  189. outputRange: [110, 130, 150]
  190. });
  191. const size1width = this.state.size1.interpolate({
  192. inputRange: [0, 0.5, 1],
  193. outputRange: [200, 250, 300]
  194. });
  195. const size1height = this.state.size2.interpolate({
  196. inputRange: [0, 0.5, 1],
  197. outputRange: [10, 20, 40]
  198. });
  199. const sizenho = this.state.sizenho.interpolate({
  200. inputRange: [0, 0.5, 1],
  201. outputRange: [150, 130, 110]
  202. });
  203. const marginBottom = this.state.time.interpolate({
  204. inputRange: [0, 1],
  205. outputRange: [-2 * deviceHeight, 0]
  206. });
  207.  
  208. return <View style = {
  209. {
  210. backgroundColor: "#b2d0ff",
  211. width: deviceWidth,
  212. height: deviceHeight,
  213. flex: 1
  214. }
  215. } >
  216. {this.state.screen1 ? <View style={{ alignSelf: "center", flex: 1 }}>
  217. <Animated.Image source={require("./image/iconmap.png")} style={{ width: size, height: size, marginTop: 50 }} />
  218. </View> : null}
  219.  
  220. {this.state.screen2 ? <View style={{ alignSelf: "center", flex: 1 }}>
  221. <Animated.Image source={require("./image/iconmap.png")} style={{ width: sizenho, height: sizenho, marginTop: 50 }} />
  222. </View> : null}
  223.  
  224. {this.state.screen1 ? <View style={{ flex: 1 }}>
  225. <Animated.View style={{ width: size1width, height: 40, margin: 20, alignSelf: "center" }}>
  226. <Button onPress={() => {
  227. Alert.alert("You tapped the button!");
  228. }} style={{ height: 40, backgroundColor: "#5a9afc", alignContent: "center" }} title="Create Account" />
  229. </Animated.View>
  230.  
  231. <View style={{ flexDirection: "row", alignSelf: "center" }}>
  232. <View style={{ backgroundColor: "#ffffff", width: deviceWidth / 3, height: 1 }} />
  233. <Text style={{ color: "#ffffff", fontWeight: "bold", fontSize: 10, marginTop: -7, marginLeft: 2, marginRight: 2 }}>
  234. OR
  235. </Text>
  236. <View style={{ backgroundColor: "#ffffff", width: deviceWidth / 3, height: 1 }} />
  237. </View>
  238.  
  239. <View style={{ margin: 10 }}>
  240. <Animated.View style={{ height: 40, width: size1width, marginRight: 10, marginLeft: 10, alignSelf: "center" }}>
  241. <Button onPress={this.onPreeScreen2} style={{ backgroundColor: "#5a9afc" }} title="Sign In" />
  242. </Animated.View>
  243. </View>
  244. </View> : null}
  245.  
  246. {
  247. this.state.screen2 ? <Animated.View style = {
  248. {
  249. backgroundColor: "rgba(12, 6, 182, 0.3)",
  250. flex: 2,
  251. marginBottom
  252. }
  253. } >
  254.  
  255. {this.state.tab1 ? <View
  256. onStartShouldSetResponder={() => true}
  257. onMoveShouldSetResponder={() => true}
  258. onResponderMove={this.onMove.bind(this)}
  259. onResponderGrant={this.onPress.bind(this)}
  260. style={{ flex: 1, margin: 10 ,backgroundColor:'red'}}>
  261. <TextInput
  262. onChangeText = {
  263. (value) => this.setState({
  264. username: value
  265. })
  266. }
  267. value = {
  268. ''+this.state.x
  269. }
  270. underlineColorAndroid="transparent" autoCapitalize="none" placeholder="User name or Email" placeholderTextColor="#ffffff" style={{ marginTop: 130, marginLeft: 10, marginRight: 10, backgroundColor: "rgba(255, 255, 255, 0.2)", height: 40 }} />
  271.  
  272. <TextInput
  273. onChangeText = {
  274. (value) => this.setState({
  275. username: value
  276. })
  277. }
  278. value = {
  279. ''+this.state.x
  280. }
  281. underlineColorAndroid = "transparent"
  282. autoCapitalize = "none"
  283. placeholder = "Password"
  284. placeholderTextColor = "#ffffff"
  285. style = {
  286. {
  287. margin: 10,
  288. backgroundColor: "rgba(255, 255, 255, 0.2)",
  289. height: 40
  290. }
  291. }
  292. />
  293.  
  294. <View style={{ margin: 10 }}>
  295. < Animated.View style = {
  296. {
  297. height: 40,
  298. width: size1width,
  299. marginRight: 10,
  300. marginLeft: 10,
  301. alignSelf: "center"
  302. }
  303. } >
  304. <Button onPress={this.onPreeScreen2} style={{ backgroundColor: "#5a9afc" }} title="Submit" />
  305. </Animated.View>
  306. </View>
  307. <Text style={{ color: "#ffffff", fontSize: 14, textAlign: "center", fontWeight: "bold",marginBottom:2 }}>
  308. Login With Facebook = {this.x}{this.y} !
  309. </Text>
  310. </View>:null}
  311.  
  312. {this.state.tab2 ? <View
  313. onStartShouldSetResponder={() => true}
  314. onMoveShouldSetResponder={() => true}
  315. onResponderMove={this.onMove.bind(this)}
  316. onResponderGrant={this.onPress.bind(this)}
  317. style={{ flex: 1, margin: 10 ,backgroundColor:'#123'}}>
  318. <TextInput
  319. onChangeText = {
  320. (value) => this.setState({
  321. username: value
  322. })
  323. }
  324. value = {
  325. ''+this.state.x
  326. }
  327. underlineColorAndroid="transparent" autoCapitalize="none" placeholder="User name or Email" placeholderTextColor="#ffffff" style={{ marginTop: 130, marginLeft: 10, marginRight: 10, backgroundColor: "rgba(255, 255, 255, 0.2)", height: 40 }} />
  328.  
  329. <TextInput
  330. onChangeText = {
  331. (value) => this.setState({
  332. username: value
  333. })
  334. }
  335. value = {
  336. ''+this.state.x
  337. }
  338. underlineColorAndroid = "transparent"
  339. autoCapitalize = "none"
  340. placeholder = "Password"
  341. placeholderTextColor = "#ffffff"
  342. style = {
  343. {
  344. margin: 10,
  345. backgroundColor: "rgba(255, 255, 255, 0.2)",
  346. height: 40
  347. }
  348. }
  349. />
  350.  
  351. <View style={{ margin: 10 }}>
  352. < Animated.View style = {
  353. {
  354. height: 40,
  355. width: size1width,
  356. marginRight: 10,
  357. marginLeft: 10,
  358. alignSelf: "center"
  359. }
  360. } >
  361. <Button onPress={this.onPreeScreen2} style={{ backgroundColor: "#5a9afc" }} title="Submit" />
  362. </Animated.View>
  363. </View>
  364. <Text style={{ color: "#ffffff", fontSize: 14, textAlign: "center", fontWeight: "bold",marginBottom:2 }}>
  365. Login With Facebook = {this.x}{this.y} !
  366. </Text>
  367. </View>:null}
  368.  
  369.  
  370. </Animated.View> : null}
  371. </View>;
  372. }
  373. }
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!