react-native-login-redux

项目地址如下

https://github.com/agunbuhori/react-native-login-redux

先看页面

　```js

// 还有中英文切换

//src/global.js

import Theme from './styles/Theme';

import Auth from './auth/Auth';

import i18n from 'react-native-i18n';

import en from './localizations/en';

i18n.translations = {

en: en

}

export { Theme, Auth, i18n }

```js

//根app

//app.js

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow

 */

import React, { Component } from 'react';

import { Platform, StyleSheet } from 'react-native';

import { Provider } from 'react-redux';

import { createStore } from 'redux';

import rootReducer from './src/reducers/rootReducer';

//多语言切换

import { Auth } from './src/global';

const store = createStore(rootReducer);

import AuthNavigator from './src/navigators/AuthNavigator';

type Props = {};

export default class App extends Component<Props> {

  constructor(props) {

    super(props);

    this.state = {

      status: 0

    }

  }

  componentDidMount() {

    this.checkAuth();

    this.checkReduxAuth();

  }

  async checkAuth() {

      const authenticated = await Auth.checkAuth();

      if (authenticated)

        this.setState({status: 2});

      else

        this.setState({status: 1});

  }

  checkReduxAuth() {

    store.subscribe(() => {

      let authentication = store.getState().authentication;

      if (authentication.authenticated)

        this.setState({ status: 2 });

      else

        this.setState({ status: 1 });

    });

  }

// 根据renderApp进行判断

  renderApp() {

    switch (this.state.status) {

      case 1:

        return <AuthNavigator/>

        break;

      case 2:

        return null;

        break;

      default:

        return null;

    }

  }

  render() {

    return (

      <Provider store={store}>

          {this.renderApp()}

      </Provider>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

//login.js

import React, { Component } from 'react';

import { ActivityIndicator, KeyboardAvoidingView, AsyncStorage } from 'react-native';

import { connect } from 'react-redux';

import { StyleSheet } from 'react-native';

import { Form, Button, Text, View, Container, Item, Input, Icon } from 'native-base';

import { Theme, i18n, Auth } from '../../global';

import { loginSuccess } from '../../actions/authentication';

import Image from 'react-native-scalable-image';

class Login extends Component {

    state = {

        loginProgress: false,

        username: null,

        password: null,

        authentication: {

            authenticated: false

        }

    }

    componentDidMount() {

    }

    async login() {

        this.setState({loginProgress: true});

        const login = await Auth.login({username: this.state.username, password: this.state.password});

        if (login.token) {

            Auth.setAuthToken(login.token, this.state.username, this.state.password);

            this.props.onLogin({authenticated: true});

        }

    }

    renderLogo() {

        return (

            <View style={Theme.mb2}>

                <Image source={require('../../assets/images/logo.png')} width={150} />

                <Image source={require('../../assets/images/akari.png')} width={130} />

            </View>

        );

    }

    renderForm() {

        return (

            <Form style={styles.loginForm}>

                <Item regular style={styles.loginInput}>

                    <Icon type="AntDesign" name="user"/>

                    <Input placeholder={i18n.t('username')} autoCapitalize="none" onChangeText={username => this.setState({username})}/>

                </Item>

                <Item regular style={styles.loginInput}>

                    <Icon type="AntDesign" name="lock"/>

                    <Input placeholder={i18n.t('password')} secureTextEntry={true} onChangeText={password => this.setState({password})}/>

                </Item>

                <Button block style={styles.loginButton} onPress={this.login.bind(this)} activeOpacity={1}>

                    {

                        this.state.loginProgress

                        ? <ActivityIndicator color="white"/>

                        : <Text style={Theme.lightBold}>{i18n.t('login')}</Text>

                    }

                </Button>

            </Form>

        );

    }

    render() {

        return (

            <KeyboardAvoidingView behavior="padding" style={styles.container}>

                {this.renderLogo()}

                {this.renderForm()}

            </KeyboardAvoidingView>

        );

    }

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        ...Theme.p1,

        ...Theme.centered

    },

    loginForm: {

        width: '100%'

    },

    loginInput: {

        ...Theme.bgSecondary,

        ...Theme.mb1,

        ...Theme.r1

    },

    loginButton: {

        ...Theme.bgPrimary,

        ...Theme.r1,

        ...Theme.primaryButton

    }

});

const mapStateToProps = state => ({

    authentication: state.authentication,

});

const mapDispatchToProps = dispatch => ({

    onLogin: (user) => {

        dispatch(loginSuccess(user));

    },

});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

咩有登陆进去，还是存在一些问题

巴特西

react-native-login-redux

最新文章

热门文章