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);

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