ELS之登录页与登录状态切换保存（一）

本项目主要实现一个建筑类在线学习系统（ELS）：模拟试卷，历年真题，章节练习（类似于驾考宝典）与在线直播视频，往期视频回顾（点播）等功能。公司内部项目，文章只记录在编写程序过程中所遇到的问题与自我学习过程。未经允许，请勿转载！！

---

这篇文章开始编写代码，我会在每篇文章后列出当前项目结构目录树

---

在src文件夹下创建screen文件夹，用于存放每一个界面

首先创建Main.tsx写出路由

import { createStackNavigator } from 'react-navigation';
import HomeScreen from './screen/Home/Home';
import DetailScreen from './screen/Detail/Detail';
import LoginScreen from './screen/Login/Login';

const App = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  },
  Login: {
    screen: LoginScreen
  }
}, {
    initialRouteName: 'Login',
    navigationOptions: {
      header: null
    }
  })

export default App;

再创建Login/Login.tsx

import * as React from 'react';
import { Component } from 'react';
import { StyleSheet, StatusBar, Linking, TouchableOpacity, ViewStyle } from 'react-native';
import {
  View,
  Container,
  Content,
  Button,
  Text,
  Form,
  Item,
  Label,
  Input,
  Spinner
} from 'native-base';
import Theme from '../../ulit/Theme';
import fetchRequest from '../../ulit/fetchRequest'
import db from '../../ulit/sql';
import { S, P, T} from './Interface';


export default class Login extends Component {

  constructor(props: P) {
    super(props)
    this.state = {
      token: '',
      phone: '',
      pwd: '',
      disabled: false
    }
  }

  componentDidMount() {
    let token: Realm.Results = db.objects('Token');
    if(token.length >= 1){
      this.setState({
        token: token[0].token
      })
    }
  }
  login: () => void = () => {
    this.setState({
      disabled: true
    })
    fetchRequest('api/Login/Login', {
      phone: this.state.phone,
      pwd: this.state.pwd
    }, 'POST').then((res: { error_code: string; token: string; }) => {
      this.setState({
        disabled: false
      })
      if (res.error_code === '200') {
        db.write(() => {
          db.create('Token', { token: res.token }, true)
        })
        this.props.navigation.navigate('Home')
      }
    }).catch(err => {
      this.setState({
        disabled: false
      })
    })
  }
  render() {
    return (
      
        
        
          
            登录筑励
            发现更大的世界
          
          
            

              
                账号/手机号
                 {
                  this.setState({
                    phone
                  })
                }} />
              
              
                密码
                 {
                  this.setState({
                    pwd
                  })
                }} />
              
            
          
          
            未注册用户请联系筑励教育
            
              QQ：
               this.openQQ()
                }>
                461047387
              
            
             this.login()}
              disabled={this.state.disabled}
              style={styles.loginBtn} block={true}>
              {
                this.state.disabled ?  : null
              }
              登录
            
          
        
      
    )
  }

  openQQ = () => {
    let url: string = "mqq://im/chat?chat_type=wpa&uin=461047387";
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(url).then()
      }
    });
  }
}

const styles = StyleSheet.create({
  title: {
    height: 150,
    backgroundColor: Theme.theme,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    color: 'white',
    fontSize: 24,
    lineHeight: 40,
    fontWeight: 'bold',
  },
  headerSub: {
    color: 'white',
    fontWeight: 'bold'
  },
  form: {
    padding: 10,
  },
  loginTip: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    height: 140
  },
  qq: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginTipText: {
    color: Theme.decText,
    fontSize: 14,
    lineHeight: 20,
    fontWeight: '600',
  },
  loginTipQQ: {
    color: Theme.theme,
    fontWeight: 'normal',
  },
  loginBtn: {
    marginTop: 15
  }
})

login.png

关于iOS不能访问http地址

iOS-http.png

当前结构

.
├── App.js
├── README.md
├── app.json
├── index.js
├── package.json
├── rn-cli.config.js
├── src
│   ├── Main.tsx
│   ├── screen
│   │   ├── Detail
│   │   │   └── Detail.tsx
│   │   ├── Home
│   │   │   ├── Book
│   │   │   │   ├── Book.tsx
│   │   │   │   └── Interface.ts
│   │   │   ├── Exam
│   │   │   │   ├── Exam.tsx
│   │   │   │   └── Interface.ts
│   │   │   ├── Home.tsx
│   │   │   ├── Interface.ts
│   │   │   ├── Live
│   │   │   │   ├── Interface.ts
│   │   │   │   └── Live.tsx
│   │   │   └── User
│   │   │       ├── Interface.js
│   │   │       ├── Interface.js.map
│   │   │       ├── Interface.ts
│   │   │       ├── User.js
│   │   │       ├── User.js.map
│   │   │       └── User.tsx
│   │   └── Login
│   │       ├── Interface.ts
│   │       └── Login.tsx
│   └── ulit
│       ├── Theme.ts
│       ├── fetchRequest.ts
│       └── sql.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock