React Native之登录界面的布局

代码注释比较详细

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

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

//获取屏幕信息
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;

class TextInputG extends Component {

render() {
return (
<View style={styles.container}>

{/*账号输入框在这里用View包裹以便处理器样式*/}
<View style={styles.textInputViewStyle}>
<TextInput
style={styles.textInputStyle}
//站位符
placeholder='手机号'/>
</View>
{/*密码输入框*/}
<View style={styles.textInputViewStyle}>
<TextInput
style={styles.textInputStyle}
placeholder='密码'
//密文
secureTextEntry={true}/>
</View>

{/*设置控件可点击*/}
<TouchableOpacity onPress={()=>{alert('点击登录')}}>
{/*登录按钮*/}
<View style={styles.textLoginViewStyle}>
<Text style={styles.textLoginStyle}>登录</Text>
</View>
</TouchableOpacity>

</View>
);
}
}

const styles = StyleSheet.create({
container: {
//设置占满屏幕
flex: 1,
// backgroundColor: 'black',
marginTop: 140,

},
//包裹输入框View样式
textInputViewStyle: {
//设置宽度减去30将其居中左右便有15的距离
width: width - 30,
height: 45,
//设置圆角程度
borderRadius: 18,
//设置边框的颜色
borderColor: 'blue',
//设置边框的宽度
borderWidth: 1,
//内边距
paddingLeft: 10,
paddingRight: 10,
//外边距
marginTop: 10,
marginLeft: 20,
marginRight: 20,
//设置相对父控件居中
alignSelf: 'center',

},
//输入框样式
textInputStyle: {
width: width - 30,
height: 35,
paddingLeft: 8,
backgroundColor: '#00000000',
// alignSelf: 'center',
//根据不同平台进行适配
marginTop: Platform.OS === 'ios' ? 4 : 8,
},

//登录按钮View样式
textLoginViewStyle: {
width: width - 30,
height: 45,
backgroundColor: 'red',
borderRadius: 20,
marginTop: 30,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
},
//登录Text文本样式
textLoginStyle: {
fontSize: 18,
color: 'white',

},

});

module.exports = TextInputG;