早就想学习下最近2年新出来非常牛逼的跨平台技术react-native 时间是一方面，懒也是一方面
难得国庆有几天假 ，今天来做一个仿扣扣登录的界面，好了不逼了
代码如下:
import
React, {
Component }
from
'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image } //这个表示本页面 需要使用到的React-native组件 先从rn中导入
from
'react-native';
/**
* 定义组件
*/
export
default
class
Login
extends
Component {
render() {
return (
<
View
style={
styles.
container}
>
<
View
style={
styles.
titleView}
>
<
Text
style={
styles.
titleText}
>
登录页面
</
Text
>
</
View
>
<
View
style={
styles.
loginView}
>
{
/* qq登录头像部分 */}
<
Image
style={
styles.
loginImg}
source={{
uri:
'https://ss1.baidu.com/73N1bjeh1BF3odCf/it/u=3247127871,1396802739&fm=202
}}
/>
{
/* qq的用户名跟密码输入部分 */}
<
TextInput
placeholder={
'请输入用户名'}
>
</
TextInput
>
<
TextInput
placeholder={
'请输入密码'}
password={
true}
>
</
TextInput
>
<
Text
style={
styles.
loginText}
>
登录
</
Text
>
</
View
>
</
View
>
);
}
}
//style样式设置
const
styles =
StyleSheet.
create({
container: {
flex:
1,
backgroundColor:
'#F5FCFF',
borderColor:
'red',
borderWidth:
1,
},
titleView: {
height:
44,
alignItems:
'center',
justifyContent:
'center',
backgroundColor:
'red',
},
titleText: {
height:
44,
textAlign:
'center',
justifyContent:
'center',
},
loginView:{
},
loginImg:{
width:
44,
height:
44,
flexDirection:
'row'
},
loginText:{
marginTop:
10,
textAlign:
'center',
borderWidth:
1,
borderColor:
'gray',
fontSize:
22,
}
});
AppRegistry.
registerComponent(
'RnFirstApp', ()
=>
RnFirstApp);
//运行效果如下：表示有点问题 ：图片没显示 尴尬的说 待解决
