Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- render: function() {
- if(this.state.register) {
- return this.renderRegisterScreen();
- }
- else if (this.state.loggedIn) {
- return this.userLoggedIn();
- }
- else {
- return this.renderLoginScreen();
- }
- }
- var React = require('react-native');
- var {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- Image,
- TouchableHighlight,
- TextInput,
- } = React;
- var Register = React.createClass({
- render: function() {
- return (
- <View style={styles.container}>
- <View style={styles.rafitoImage}>
- <Image source={require('./logo.png')}></Image>
- <Text style={styles.slogan}>Eliminate the need to wait!</Text>
- </View>
- <View style={styles.bottomSection}>
- <View style={styles.username}>
- <View style={styles.inputBorder}>
- <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
- </View>
- <View style={styles.inputBorder}>
- <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
- </View>
- <View style={styles.inputBorder}>
- <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
- </View>
- <View style={styles.inputBorder}>
- <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
- </View>
- <View style={styles.inputBorder}>
- <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
- </View>
- <TouchableHighlight style={styles.button}
- underlayColor='#f1c40f' onPress={this.register}>
- <Text style={styles.buttonText}>Register</Text>
- </TouchableHighlight>
- <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
- underlayColor='#ffffff'>
- <Text style={styles.signUpText}>Already A Member </Text>
- </TouchableHighlight>
- </View>
- </View>
- <View style={styles.copyright}>
- </View>
- </View>
- );
- },
- resetToLogin: function() {
- this.setState({
- register: false //I want this to re render the home screen with the variable register as false
- });
- }
- });
- var styles = StyleSheet.create({
- container: {
- flex : 1
- },
- bottomSection: {
- flex: 5,
- flexDirection: 'row'
- },
- button: {
- height: 36,
- backgroundColor: '#32c5d2',
- justifyContent: 'center',
- marginTop: 20
- },
- buttonText: {
- fontSize: 18,
- color: 'white',
- alignSelf: 'center'
- },
- signUpText: {
- color: '#3598dc'
- },
- signUp: {
- alignItems: 'flex-end',
- marginTop: 10,
- },
- username: {
- flex: 1,
- padding: 5
- },
- rafitoImage: {
- flex: 3,
- justifyContent: 'center',
- alignItems: 'center',
- },
- copyright: {
- alignItems: 'center'
- },
- usernameInput: {
- height: 36,
- marginTop: 10,
- marginBottom: 10,
- fontSize: 18,
- padding: 5
- },
- copyrightText: {
- color: '#cccccc',
- fontSize: 12
- },
- inputBorder: {
- borderBottomWidth: 1,
- borderBottomColor: '#ececec'
- },
- slogan: {
- color: '#3598dc'
- }
- });
- module.exports = Register;
- renderRegisterScreen: function() {
- return (
- <Register login={this.login}/>
- )
- }
- <TouchableHighlight style={styles.signUp} onPress={this.props.login}
- underlayColor='#ffffff'>
- <Text style={styles.signUpText}>Already A Member </Text>
- </TouchableHighlight>
- var Parent = React.createClass({
- getInitialState() {
- return {
- registered: false
- }
- },
- register(){
- console.log("logging in... ");
- this.setState({
- registered: true
- });
- },
- render: function() {
- return (
- <View style={styles.container}>
- <Child register={this.register.bind(this)} registered={this.state.registered} />
- {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
- <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
- </View>}
- </View>
- );
- }
- });
- var Child = React.createClass({
- render: function() {
- return(
- <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
- <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
- {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
- </TouchableHighlight>
- </View>
- )
- }
- })
- onPress={this.props.login}
- onPress={()=>this.props.login}
- render: function() {
- return (
- ...
- <Child changeParentState={newState=>this.setstate(newState)} />
- ...
- );
- }
- this.props.changeParentState({registered: true})
Add Comment
Please, Sign In to add comment