React Native -----登录

2018-01-21  本文已影响1381人  Rathen

前言

根据公司业务，需要移动端使用React Native 开发，所以提前先开始学习一下，加以推进。

准备

搭建环境

RN的环境对于我们来说有点蛋疼。。。所以要完全按照RN官方文档上来执行 React Native 中文网

开发工具我使用的是webstore

WebStorm.png
安装好 WebStorm 后，为了更便捷的去开发，我们需要安装一些插件，以及进行一些常用配置。比如RN组件库的安装，添加一些常用的Live Templates等，[React Native]去掉WebStorm中黄色警告

Hello World

所有的环境和软件安装好后，就开始咱们的“hello world”


创建工程HelloWorld.png

创建目录，通过终端进入文件夹cd /Users/rui/Desktop/HelloWorld
然后创建工程 react-native init HelloWorld
等待一会就可以完成下载
由于本人是iOS开发，现阶段演示都通过Xcode来运行


文件内容.png

创建好的文件内容，打开iOS文件夹，运行里面的程序


AppDelegate中代码.png
点击运行后，第一次运行会有点慢，需要下载一些配置文件，成功运行后，只需要在模拟器上执行command + r 就可以运行最新的代码了

好了，开始学习些Hllo World

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});
HelloWorld.png

了解APP.js文件

在项目文件夹中有一个App.js的文件，它的作用是
1）组件导入区： 所有用到的组件都需要事先进行导入，包括样式也需要进行导入

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

2）核心代码区：所有逻辑代码编写的地方

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World
        </Text>
      </View>
    );
  }
}

3）组件样式区：render() 方法中用到的组件的样式，可以集中在这里编写

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

4）注册启动组件：组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

Flex布局

Flex布局是web人员开发必备知识，也是学习RN的必备知识，但是有一些web属性是在RN中没有的，这个以后遇到会一一讲解

登录页面

学完布局后，先来一个简单的页面，常见的登录页面，这里直接放代码，里面加有注释，大家可以自己查看一下

首先我先创建一个名称为LoginView的js文件，在里面进行布局


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
} from 'react-native';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;



export default class loginView extends  Component {
    render() {
        return (
            <View style={styles.container}>
                {/*{头像}*/}
                <Image source={require('../img/111.jpg')} style={styles.iconStyle}/>
                {/*账号和密码*/}
                <TextInput placeholder={'请输入账号'}
                           style={styles.textInputStyle}
                />
                <TextInput placeholder={'请输入密码'}
                           style={styles.textInputStyle}
                           password={true}
                />
                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>
                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View>
                {/*三方登录方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text>其他登录方式</Text>
                    <Image source={require('../img/icon3.png')} style={styles.otherImageStyle}></Image>
                    <Image source={require('../img/icon7.png')} style={styles.otherImageStyle}></Image>
                    <Image source={require('../img/icon8.png')} style={styles.otherImageStyle}></Image>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    iconStyle:{
        width:80,
        height:80,
        marginTop:50,
        borderRadius:40,
        borderWidth:2,
        borderColor:'orange',
        marginBottom:30,
    },
    textInputStyle:{
        backgroundColor:'white',
        width:width,
        height:40,
        marginBottom:1,
        textAlign:'center',
        paddingLeft:15,
    },
    loginBtnStyle:{
        height:40,
        width:width*0.8,
        backgroundColor:'blue',
        marginTop:30,
        marginBottom:30,
        //flex布局
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8
    },
    settingStyle:{
        flexDirection:'row',
        width:width*0.8,
        justifyContent:'space-between',
    },
    otherLoginStyle: {
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:10,
        left:20
    },
    otherImageStyle:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:10,
    },
});

//输出一个类
module.exports = loginView;

最后将前面介绍过的APP.js文件进行修改，让它显示你写的登录页面

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

var LoginView = require('./login/js/loginView')


export default class App extends Component<{}> {
  render() {
    return (
        <LoginView/>
    );
  }
}

这样一个完整的登录页面就显示出来了，是不是很简单啊


登录.png
上一篇下一篇

猜你喜欢

热点阅读