zoukankan      html  css  js  c++  java
  • 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: {
             '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);
    


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

  • 相关阅读:
    Android外部SD卡的读取
    TableLayout(表格布局)
    Android中Adapter之BaseAdapter使用
    Android中Spinner下拉列表(使用ArrayAdapter和自定义Adapter实现) .
    html5新增及废除属性
    Android Studio运行程序出现Session ‘app’: Error Launching activity 解决办法
    Android的面孔_Actiyity
    初步理解类和对象
    zabbix(2)使用指南
    zabbix(1)基础知识
  • 原文地址:https://www.cnblogs.com/smart-girl/p/10876487.html
Copyright © 2011-2022 走看看