React Native -- 登录页面

96493823-9A5E-4ED2-B2FD-573EFDD6C481.png

新手入坑RN，多动手才是王道，把 React Native 中文网的入门基础知识看完：

DFED8E50-4332-49DA-B944-C0918D6267CD.png

有中文的时候，人就会变懒的感觉，还是要多看官网的，依赖中文是一种病，看来得治下。虽然看完了，但还是一脸懵逼的，所以决定来写一个登录界面来熟悉下RN的写法。这里就基于上篇引导页的工程来写，有兴趣的也可以过去看下，先看整体工程结构：

E8FD7357-E523-46CD-A353-73F41ABA98DC.png

新手级别内容，直接上代码了，login.js 内容：

'use strict';
import React, {Component} from 'react';
import { View, Text, TextInput, StyleSheet, Image, PixelRatio, } from 'react-native';
import Button from '../component/Button';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <View style={styles.view}>
        <View style={styles.editGroup}>
          <View style={styles.username}>
            <TextInput
              style={styles.edit}
              placeholder="用户名"
              placeholderTextColor="#c4c4c4"
              onChangeText={(text) => this.setState({text})}
              />
          </View>
          <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
            <View style={styles.password}>
              <TextInput
              style={styles.edit}
              placeholder="密码"
              placeholderTextColor="#c4c4c4"
              secureTextEntry={true}
              onChangeText={(password) => this.setState({password})}
              />
            </View>
            <View style={{marginTop: 10}}>
              <Button text="登录" onPress={this._handleClick.bind(this)}/>
            </View>
        </View>
      </View>
    );
  }

  _handleClick() {
    console.log('username:' + this.state.text);
    console.log('password:' + this.state.password);
  }

}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    backgroundColor: 'rgb(22,131,251)',
  },
  editGroup: {
    margin: 20,
  },
  username: {
    marginTop: 100,
    height: 48,
    backgroundColor: 'white',
    justifyContent: 'center',
    borderTopLeftRadius: 3,
    borderTopRightRadius: 3,
  },
  password: {
    height: 48,
    backgroundColor: 'white',
    justifyContent: 'center',
    borderBottomLeftRadius: 3,
    borderBottomRightRadius: 3,
  },
  edit:{
    height: 40,
    fontSize: 13,
    backgroundColor: '#fff',
    paddingLeft: 15,
    paddingRight: 15,
  },
});

这里需要提供 username 和 password 两个变量来保存下用户名和密码，其它的目测真的没有什么好说的了。看不懂的就只能先去看下文档再回头看了~~

_handleClick() {
    console.log('username:' + this.state.text);
    console.log('password:' + this.state.password);
 }

这里是点击事件的调用方法，打印下用户名和密码的信息。

自定义 Button.js 内容：

'use strict';
import React, {Component, PropTypes} from 'react';
import { Text, View, StyleSheet, Platform, TouchableHighlight, TouchableNativeFeedback } from 'react-native';

export default class Button extends Component {
  render() {
    if (Platform.OS === 'android') {
      return(
        <TouchableNativeFeedback
          onPress={this.props.onPress}>
          {this._renderContent()}
        </TouchableNativeFeedback>
      );
    } else if (Platform.OS === 'ios') {
      return(
        <TouchableHighlight
          onPress={this.props.onPress}>
          {this._renderContent()}
        </TouchableHighlight>
      );
    }
  }

  _renderContent() {
    return(
      <View style={styles.content}>
          <Text style={styles.text}>{this.props.text}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  text: {
    color: 'white',
    fontSize: 13,
  },
  content: {
    height: 45,
    backgroundColor: '#046ada',
    alignItems:'center',
    justifyContent:'center',
    borderRadius: 3
  },
});

这里通过Platform.OS来判断使用的系统，为iOS 和 Android 提供两个不同的button样式。

点击方法通过 this.props.onPress 引用过来。其他的就是样式了~~

新手入门RN的同学们，千万不想相信 react native 中文网推荐的东方耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广one 点公益，也敢叫公益的公益。被骗得不要不要。