【水滴石穿】AB-B-Clone

地址:
源碼
運行效果

無別的效果，代碼以下

//index.js
/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import {AppRegistry} from 'react-native';
import App from './App';


AppRegistry.registerComponent('ABNB_clone', () => App);

import React, {Component} from 'react';
import { AppRegistry, View } from 'react-native';
import LoggedOut from './src/screens/LoggedOut';
// 登錄組件

class App extends Component {
  render() {
    return (
      <View>
        <LoggedOut />
      </View>
    )
  }
}

AppRegistry.registerComponent('App', () => App);

export default App;

封裝的RoundedButton組件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, TouchableHighlight, StyleSheet} from 'react-native';
import colors from '../../styles/colors';



export default class RoundedButton extends Component {
  render() {
      const { 
        text, 
        textColor, 
        background, 
        handleOnPress,
        icon 
    } = this.props;
      const backgroundColor = background || 'transparent';
      const color = textColor || colors.black;
    return (
        <TouchableHighlight 
            style={[{backgroundColor}, styles.wrapper]}
            onPress={handleOnPress}
        >
        <View style={styles.buttonTextWrapper}>
        {icon}          
          <Text style={[{color},styles.buttonText]}>{text}</Text>
        </View> 
        </TouchableHighlight>
    )
  }
}

RoundedButton.PropTypes = {
    text: PropTypes.string.isRequired,
    textColor: PropTypes.string,
    background: PropTypes.string,
    icon: PropTypes.object,
    handleOnPress: PropTypes.func.isRequired,
}

const styles = StyleSheet.create({
    wrapper: {
        display: 'flex',
        padding: 15,
        borderRadius: 40,
        borderWidth: 1,
        borderColor: colors.white,
        height: 50,
        marginBottom: 15,
        alignItems: 'center',
    },
    buttonText: {
        fontSize: 16,
        width: '100%',
        textAlign: 'center'
    },
    buttonTextWrapper: {
        flexDirection: 'row',
        justifyContent: 'flex-end',

    }
    
});

//LoggedOut
import React, {Component} from 'react';
import { Image, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import RoundedButton from '../components/buttons/RoundedButton';
import colors from '../styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome';


const airbnbLogo = require('../images/airbnb-logo.png')

class LoggedOut extends Component {
    onFacebookPress(){
        alert('Facebook press')
    }

    onCreateAccountPress(){
        alert('Create Account')
    }

    onMoreOptionsPress(){
        alert('More Options')
    }

  render() {
    return (
        <View style={styles.wrapper}>
            <View style={styles.welcomeWrapper}>
                 <Image 
                    source={airbnbLogo} 
                    style={styles.logo}
                />
                <Text style={styles.welcomeText}>
                Welcome to Airbnb
                </Text>
                <RoundedButton 
                    text="Continue with Facebook"
                    textColor={colors.green01}
                    background={colors.white}
                    icon={<Icon name="facebook" size={20} style={styles.facebookButtonIcon} />}
                    handleOnPress={this.onFacebookPress}
                />
                 <RoundedButton 
                    text="Create Account"
                    textColor={colors.white}
                    background={colors.green01}
                    handleOnPress={this.onCreateAccountPress}
                />
                <TouchableHighlight 
                    style={styles.moreOptionsButton}
                    onPress={this.onMoreOptionsPress}
                >
                    <Text style={styles.moreOptionsButtonText}>More Options</Text>
                </TouchableHighlight>
                <View style={styles.termsAndConditions}>
                    <Text style={styles.termsText}>
                    By Tapping Continue. Create An Account or More 
                    </Text>
                        <Text style={styles.termsText}>options, </Text>
                        <Text style={styles.termsText}>I agree to Airbnb's</Text>
                    <TouchableHighlight style={styles.linkButton}>
                        <Text style={styles.termsText}>Terms of Service</Text>
                    </TouchableHighlight>
                        <Text style={styles.termsText}> ,</Text>                  
                    <TouchableHighlight style={styles.linkButton}>
                        <Text style={styles.termsText}>Payments, Terms of Service</Text>
                    </TouchableHighlight>
                    <Text style={styles.termsText}> ,and</Text> 
                    <TouchableHighlight style={styles.linkButton}>
                        <Text style={styles.termsText}>Privacy Policy</Text>
                    </TouchableHighlight>  
                    <Text style={styles.termsText}> ,</Text> 
                    <TouchableHighlight style={styles.linkButton}>
                        <Text style={styles.termsText}>Nondiscrimination Policy.</Text>
                    </TouchableHighlight>   
                </View>                     
            </View>          
        </View>
    )
  }
}

export default LoggedOut;

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        display: 'flex',
        backgroundColor: colors.green01,
    },
    welcomeWrapper: {
        flex: 1,
        display: 'flex',
        marginTop: 30,
        padding: 20
    },  
    logo: {
        width: 50,
        height: 50,
        marginTop: 50,
        marginBottom: 40,
    },
    welcomeText: {
        fontSize: 30,
        height: 60,
        color: colors.white,
        fontWeight: '300',
    },
    facebookButtonIcon: {
        color: colors.green01,
        position: 'relative',
        left: 30,
        zIndex: 8,
        width: 20,
    },
    moreOptionsButton: {
        marginTop: 15,
        width: 50,
    },
    moreOptionsButtonText: {
        color: colors.white,
        width: 200,
        fontSize: 20,
        height: 30,
    },
    termsAndConditions: {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row',
        marginTop: 40
    },
    termsText: {
        color: colors.white,
        fontSize: 12,
        fontWeight: '600',
        height: 20
    },
    linkButton: {
        borderBottomWidth: 0.5,
        display: 'flex',
        borderBottomColor: colors.white,
    }
})

第一個完畢～