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 {
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
break;
case 2:
return null;
break;
default:
return null;

}

}

render() {
return (

{this.renderApp()}

);
}
}

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,
},
});
js
//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);
```

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

转载于:https://www.cnblogs.com/smart-girl/p/10876487.html