React-native学习过程 五 登录界面

这次做一个登录界面

1. 显示图片，图片通过URL网上获取，并对其通过样式进行设定其大小和间距

<Image
source={{uri: 'http://oss-hz.qianmi.com/qianmicom/u/cms/qmwww/201511/03102524l6ur.png'}}
style={styles.logo}/>

logo:{
width:160,
height:160,
marginTop:100
}

添加两个输入框，通过样式表设定大小间距，还有就是通过placeholder设置其默认值

<TextInput
style={styles.input}
placeholder='username'/>
<TextInput
style={styles.input}
placeholder='password'
password={true}/>

input:{
marginTop:10,
width:300,
height:40,
borderRadius:5,
borderWidth:1,
borderColor:'lightblue'
}

添加button，因为这个要体现出你点击了button，所以必须有特效,这个TouchableOpacity控件如果被点击了，它的透明度会变小，然后还得在里面加一个Text，表示他是登录按钮

<TouchableOpacity style={styles.btn}
onPress={()=> console.log('press me')}>
<Text style={styles.text}>login</Text>
</TouchableOpacity>
btn:{
width:150,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#3333FF',
height:40,
borderRadius:5,
marginTop:10
},
text:{
fontWeight:'bold',
fontSize:14,
color:'#FFF'
},

完整代码如下

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

export default class MyProject extends Component {
render(){
return (
<View style={styles.container}>
<Image
source={{uri: 'http://oss-hz.qianmi.com/qianmicom/u/cms/qmwww/201511/03102524l6ur.png'}}
style={styles.logo}/>
<TextInput
style={styles.input}
placeholder='username'/>
<TextInput
style={styles.input}
placeholder='password'
password={true}/>
<TouchableOpacity style={styles.btn}
onPress={()=> console.log('press me')}>
<Text style={styles.text}>login</Text>
</TouchableOpacity>
</View>

);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingLeft:10,
paddingRight:10,
backgroundColor: '#F5FCFF'
},
input:{
marginTop:10,
width:300,
height:40,
borderRadius:5,
borderWidth:1,
borderColor:'lightblue'
},
btn:{
width:150,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#3333FF',
height:40,
borderRadius:5,
marginTop:10
},
text:{
fontWeight:'bold',
fontSize:14,
color:'#FFF'
},
logo:{
width:160,
height:160,
marginTop:100
}

});

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

再见