【水滴石穿】LoginScreen_Firabase_ReactNativeApp

先看效果

分析代码我们会发现，它使用了firebase

关于登陆部分应该是实时数据库，应该是他们后端校验的

//app.js

//这里使用了实时数据库

import React, { Component } from 'react';

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

import firebase from '@firebase/app'

import '@firebase/auth'

import reducers from './reducers';

import LoginForm from './components/LoginForm';

import ReduxThunk from 'redux-thunk';

import Router from './Router';

class App extends Component {

    componentWillMount() {

        const config = {

            apiKey: "AIzaSyCjISFhbzv3O7pYWoF2T9_jAitNz7LuOkI",

            authDomain: "manager-007.firebaseapp.com",

            databaseURL: "https://manager-007.firebaseio.com",

            projectId: "manager-007",

            storageBucket: "manager-007.appspot.com",

            messagingSenderId: "374905155600"

          };

          firebase.initializeApp(config);

    }

    render() {

        const store= createStore(reducers, {}, applyMiddleware(ReduxThunk));

        return (

            <Provider store = {store} >

                <Router/>

            </Provider>

        );

    }

}

export default App;

//router.js

import React from 'react';

import { Scene, Router, Actions } from 'react-native-router-flux';

import LoginForm from './components/LoginForm';

import EmployeeList from './components/EmployeeList'

import EmployeeCreate from './components/EmployeeCreate';

const RouterComponent = () => {

    return(

        <Router>

            <Scene key="root" hideNavBar>

                <Scene key="auth">

                    <Scene key="login" component={LoginForm} title="Login"  initial/>

                </Scene>

                <Scene key="main">

                    <Scene

                        rightTitle="Add"

                        onRight={() => Actions.employeeCreate() }

                        key="employeeList"

                        component={EmployeeList}

                        title="Employees"

                        initial

                    />

                    <Scene

                        key="employeeCreate"

                        component={EmployeeCreate}

                        title="Create Employee"

                    />

                </Scene>

            </Scene>

        </Router>

    );

};

export default RouterComponent;

//src/components/LoginForm.js

import React, { Component } from 'react';

import { Text, View } from 'react-native';

import { connect } from 'react-redux';

import { emailChanged, passwordChanged, loginUser } from '../actions';

import { Card, CardSection, Input, Button, Spinner } from './common';

class LoginForm extends Component{

    onEmailChange(text){

        this.props.emailChanged(text);

    }

    onPasswordChange(text){

        this.props.passwordChanged(text);

    }

    onButtonPress(){

        const {email, password } = this.props;

        this.props.loginUser({ email, password});

    }

    renderButton()

    {

        if(this.props.loading)

        {

            return <Spinner size="large"/>

        }

        return(

            <Button onPress={this.onButtonPress.bind(this)}>

                Login

            </Button>

        );

    }

    renderError(){

        if(this.props.error)

        {

            return(

                <View style={{ backgroundColor: 'white'}}>

                    <Text style={styles.errorTextStyle}>

                        {this.props.error}

                    </Text>

                </View>

            );

        }

    }

    render(){

        return (

            <Card>

                <CardSection>

                    <Input

                        placeholder="Email"

                        onChangeText={this.onEmailChange.bind(this)}

                        value={this.props.email}

                    />

                </CardSection>

                <CardSection>

                    <Input

                        secureTextEntry

                        placeholder="Password"

                        onChangeText={this.onPasswordChange.bind(this)}

                        value={this.props.password}

                    />

                </CardSection>

                {this.renderError()}

                <CardSection>

                    {this.renderButton()}

                </CardSection>

            </Card>

        );

    }

}

const styles = {

    errorTextStyle: {

        fontSize: 20,

        alignSelf: 'center',

        color: 'red'

    }

}

const mapStateToProps = state => {

    return {

        email: state.auth.email,

        password: state.auth.password,

        error : state.auth.error,

        loading : state.auth.loading

    };

};

export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })( LoginForm);

//src/components/ListItem.js

import React, { Component } from 'react';

import { Text , TouchableWithoutFeedback, View } from 'react-native';

import { CardSection } from './common';

import { Actions } from 'react-native-router-flux';

class ListItem extends Component {

    onRowPress() {

        Actions.employeeCreate();

    }

    render() {

        const { name } = this.props.employee;

        return (

            <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>

                <View>

                    <CardSection>

                        <Text style ={styles.titleStyle}>

                            {name}

                        </Text>

                    </CardSection>

                </View>

            </TouchableWithoutFeedback>

        );

    }

}

const styles = {

    titleStyle:{

        fontSize: 18,

        paddingLeft: 15

    }

}

export default ListItem;

//src/components/EmployeeList.js

import _ from 'lodash';

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { ListView} from 'react-native';

import { employeesFetch } from '../actions'

import ListItem from './ListItem';

class EmployeeList extends Component {

    componentWillMount(){

        this.props.employeesFetch();

        this.createDataSource(this.props);

    }

    componentWillReceiveProps(nextProps){

        this.createDataSource(nextProps);

    }

    createDataSource({ employees}) {

        const ds = new ListView.DataSource({

            rowHasChanged: (r1,r2) => r1 !== r2

        });

        this.dataSource = ds.cloneWithRows(employees);

    }

    renderRow( employee){

        return <ListItem employee = {employee} />

    }

    render() {

        return(

            <ListView

                enableEmptySections

                dataSource={this.dataSource}

                renderRow= {this.renderRow}

            />

        );

    }

}

const mapStateToProps = state => {

    const employees = _.map(state.employees, (val, uid) => {

        return { ...val, uid};

    });

    return { employees };

};

export default connect(mapStateToProps, {employeesFetch}) (EmployeeList);

import React, { Component } from 'react';

import { Picker, Text } from 'react-native';

import { connect } from 'react-redux';

import { employeeUpdate,employeeCreate } from '../actions';

import {Card, CardSection, Input, Button } from './common';

class EmployeeCreate extends Component{

    onButtonPress(){

        const {name, phone, shift } = this.props;

        this.props.employeeCreate({name, phone, shift: shift || 'Monday'});

    }

    render() {

        return(

            <Card>

                <CardSection>

                    <Input

                        label="Name"

                        placeholder="Shajedul"

                        value={this.props.name}

                        onChangeText={text => this.props.employeeUpdate({prop:'name', value: text})}

                    />

                </CardSection>

                <CardSection>

                    <Input

                        label="Phone"

                        placeholder="01628734916"

                        value={this.props.phone}

                        onChangeText={text => this.props.employeeUpdate({prop:'phone', value: text})}

                    />

                </CardSection>

                <Text style={styles.pickerTextStyle}>Shift</Text>

                <CardSection >

                    <Picker

                        style={{ flex: 1 }}

                        selectedValue={this.props.shift}

                        onValueChange={day => this.props.employeeUpdate({prop: 'shift', value: day})}

                    >

                        <Picker.Item label="Monday" value="Monday" />

                        <Picker.Item label="Tuesday" value="Tuesday" />

                        <Picker.Item label="Wednesday" value="Wednesday" />

                        <Picker.Item label="Thursday" value="Thursday" />

                        <Picker.Item label="Friday" value="Friday" />

                        <Picker.Item label="Saturday" value="Saturday" />

                        <Picker.Item label="Sunday" value="Sunday" />

                    </Picker>

                </CardSection>

                <CardSection>

                    <Button onPress={this.onButtonPress.bind(this)}>

                        Create

                    </Button>

                </CardSection>

            </Card>

        );

    }

}

const styles = {

    pickerTextStyle: {

        fontSize: 18,

        paddingLeft: 18,

        paddingTop: 5,

        paddingBottom: 5

    }

}

const mapStateToProps = (state) => {

    const { name, phone, shift } = state.employeeForm;

    return { name, phone, shift };

};

export default connect(mapStateToProps, { employeeUpdate, employeeCreate }) (EmployeeCreate);

在action中的处理

import firebase from '@firebase/app';

import '@firebase/auth'

import '@firebase/database'

import { Actions } from 'react-native-router-flux';

import {

    EMPLOYEE_UPDATE,

    EMPLOYEE_CREATE,

    EMPLOYEES_FETCH_SUCCESS

} from './types';

export const employeeUpdate = ({ prop, value }) => {

    return {

        type: EMPLOYEE_UPDATE,

        payload: {prop, value}

    };

};

export const employeeCreate = ({ name, phone, shift }) => {

    const { currentUser } = firebase.auth();

    return(dispatch) =>

    {

        firebase.database().ref(`/users/${currentUser.uid}/employees`)

            .push({ name, phone, shift })

            .then(() =>

            {

                dispatch({ type: EMPLOYEE_CREATE});

                Actions.pop();

            });

    };

};

export const employeesFetch = () =>{

    const { currentUser } = firebase.auth();

    return(dispatch) => {

        firebase.database().ref(`/users/${currentUser.uid}/employees`)

            .on('value', snapshot => {

                dispatch({ type: EMPLOYEES_FETCH_SUCCESS, payload: snapshot.val() });

            });

    };

};

用的redux还是有些复杂啊～

项目地址：https://github.com/shajedulislam/LoginScreen_Firabase_ReactNativeApp_Redux

巴特西

【水滴石穿】LoginScreen_Firabase_ReactNativeApp_Redux

最新文章

热门文章