Guest User

Untitled

a guest
Oct 22nd, 2017
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.55 KB | None | 0 0
  1. render: function() {
  2. if(this.state.register) {
  3. return this.renderRegisterScreen();
  4. }
  5. else if (this.state.loggedIn) {
  6. return this.userLoggedIn();
  7. }
  8. else {
  9. return this.renderLoginScreen();
  10. }
  11. }
  12.  
  13. var React = require('react-native');
  14. var {
  15. AppRegistry,
  16. StyleSheet,
  17. Text,
  18. View,
  19. Image,
  20. TouchableHighlight,
  21. TextInput,
  22. } = React;
  23.  
  24. var Register = React.createClass({
  25. render: function() {
  26. return (
  27. <View style={styles.container}>
  28. <View style={styles.rafitoImage}>
  29. <Image source={require('./logo.png')}></Image>
  30. <Text style={styles.slogan}>Eliminate the need to wait!</Text>
  31. </View>
  32. <View style={styles.bottomSection}>
  33. <View style={styles.username}>
  34. <View style={styles.inputBorder}>
  35. <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
  36. </View>
  37. <View style={styles.inputBorder}>
  38. <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
  39. </View>
  40. <View style={styles.inputBorder}>
  41. <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
  42. </View>
  43. <View style={styles.inputBorder}>
  44. <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
  45. </View>
  46. <View style={styles.inputBorder}>
  47. <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
  48. </View>
  49. <TouchableHighlight style={styles.button}
  50. underlayColor='#f1c40f' onPress={this.register}>
  51. <Text style={styles.buttonText}>Register</Text>
  52. </TouchableHighlight>
  53. <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
  54. underlayColor='#ffffff'>
  55. <Text style={styles.signUpText}>Already A Member </Text>
  56. </TouchableHighlight>
  57. </View>
  58. </View>
  59. <View style={styles.copyright}>
  60. </View>
  61. </View>
  62. );
  63. },
  64.  
  65. resetToLogin: function() {
  66. this.setState({
  67. register: false //I want this to re render the home screen with the variable register as false
  68. });
  69. }
  70. });
  71.  
  72. var styles = StyleSheet.create({
  73. container: {
  74. flex : 1
  75. },
  76. bottomSection: {
  77. flex: 5,
  78. flexDirection: 'row'
  79. },
  80. button: {
  81. height: 36,
  82. backgroundColor: '#32c5d2',
  83. justifyContent: 'center',
  84. marginTop: 20
  85. },
  86. buttonText: {
  87. fontSize: 18,
  88. color: 'white',
  89. alignSelf: 'center'
  90. },
  91. signUpText: {
  92. color: '#3598dc'
  93. },
  94. signUp: {
  95. alignItems: 'flex-end',
  96. marginTop: 10,
  97. },
  98. username: {
  99. flex: 1,
  100. padding: 5
  101. },
  102. rafitoImage: {
  103. flex: 3,
  104. justifyContent: 'center',
  105. alignItems: 'center',
  106. },
  107. copyright: {
  108. alignItems: 'center'
  109. },
  110. usernameInput: {
  111. height: 36,
  112. marginTop: 10,
  113. marginBottom: 10,
  114. fontSize: 18,
  115. padding: 5
  116. },
  117. copyrightText: {
  118. color: '#cccccc',
  119. fontSize: 12
  120. },
  121. inputBorder: {
  122. borderBottomWidth: 1,
  123. borderBottomColor: '#ececec'
  124. },
  125. slogan: {
  126. color: '#3598dc'
  127. }
  128. });
  129.  
  130. module.exports = Register;
  131.  
  132. renderRegisterScreen: function() {
  133. return (
  134. <Register login={this.login}/>
  135. )
  136. }
  137.  
  138. <TouchableHighlight style={styles.signUp} onPress={this.props.login}
  139. underlayColor='#ffffff'>
  140. <Text style={styles.signUpText}>Already A Member </Text>
  141. </TouchableHighlight>
  142.  
  143. var Parent = React.createClass({
  144.  
  145. getInitialState() {
  146. return {
  147. registered: false
  148. }
  149. },
  150.  
  151. register(){
  152. console.log("logging in... ");
  153. this.setState({
  154. registered: true
  155. });
  156.  
  157. },
  158.  
  159. render: function() {
  160. return (
  161. <View style={styles.container}>
  162. <Child register={this.register.bind(this)} registered={this.state.registered} />
  163. {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
  164. <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
  165. </View>}
  166. </View>
  167. );
  168. }
  169. });
  170.  
  171. var Child = React.createClass({
  172.  
  173. render: function() {
  174. return(
  175. <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
  176. <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
  177. {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
  178. </TouchableHighlight>
  179. </View>
  180. )
  181. }
  182. })
  183.  
  184. onPress={this.props.login}
  185.  
  186. onPress={()=>this.props.login}
  187.  
  188. render: function() {
  189. return (
  190. ...
  191. <Child changeParentState={newState=>this.setstate(newState)} />
  192. ...
  193. );
  194. }
  195.  
  196. this.props.changeParentState({registered: true})
Add Comment
Please, Sign In to add comment