【水滴石穿】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,

    }

})

第一个完毕～

巴特西

【水滴石穿】AB-B-Clone

最新文章

热门文章