react-native 学习之TextInput组件篇

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';

class machaoProject extends Component {
  render() {
    return (
      <View style={styles.container}>

       <Image
       style = {styles.iconStyle}
       source = {require('./Images/001.png')}
       />

      <TextInput
      style = {styles.userNameStyle}
      placeholder = 'QQ号/手机号/邮箱'
      numberOfLines = {1}
      underlineColorAndroid = {'transparent'}
      textAlign = 'center'
      />

       <View style = {{height: 1 ,backgroundColor: '#f4f4f4'}}/>

      <TextInput
      style = {styles.password_style}
      placeholder = '密码'
      numberOfLines = {1}
      underlineColorAndroid = {'transparent'}
      secureTextEntry = {true}
      textAlign = 'center'
      />
    <View style = {styles.loginViewStyle}>
    <Text style = {{color: '#fff'}}>登陆</Text>
    </View>
    
    <View style = {{flex: 1 , flexDirection: 'row' ,bottom: 10 ,alignItems: 'flex-end'}}>
    <Text style = {styles.unloginStyle}>无法登陆？</Text>
    <Text style = {styles.register}>新用户</Text>
    </View>
    
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f4f4'
  },
 iconStyle: {
     height: 70,
      70,
     borderRadius: 70 / 2,
     marginTop: 40,
     alignSelf: 'center'
 },
 userNameStyle: {
     marginTop: 10,
     height: 40,
     backgroundColor: '#fff'
 },
password_style: {
    height: 40,
    backgroundColor: '#fff'
},
loginViewStyle: {
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    height: 40,
    borderRadius: 5,
    backgroundColor: '#63B8FF',
    alignItems: 'center',
    justifyContent: 'center'
},
unloginStyle: {
    marginLeft: 10,
    fontSize: 12,
    color: '#63B8FF'
},
register: {
    marginRight: 10,
    fontSize: 12,
    color: '#63B8FF',
    textAlign: 'right',
    alignItems: 'flex-end',
    flex: 1,
    flexDirection: 'row'
}


});

AppRegistry.registerComponent('machaoProject', () => machaoProject);