App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
//引入外部组件
var LoginView = require('./LoginView')
export default class App extends Component<{}> {
render() {
return (
//使用组件
<LoginView/>
)
;
}
}
LoginView.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
TextInput
} from 'react-native';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
class loginView extends Component<{}> {
render() {
return (
<View style={styles.container}>
{/*头像*/}
<Image source={require('./img/01.png')} style={styles.iconStyle}/>
{/*账号和密码*/}
<TextInput placeholder={'请输入用户名'} style={styles.textInputStyle}/>
<TextInput placeholder={'请输入密码'} password={true} style={styles.textInputStyle}/>
{/*登录*/}
<View style={styles.loginBtnStyle}>
<Text style={{color:'white'}}>登录</Text>
</View>
{/*设置*/}
<View style={styles.SettingStyle}>
<Text>无法登录</Text>
<Text>新用户</Text>
</View>
{/*其他登录方式*/}
<View style={styles.otherLoginStyle}>
<Text>其他方式登录</Text>
<Image source={require('./img/icon_1.png')} style={styles.otherImageStyle}/>
<Image source={require('./img/icon_2.png')} style={styles.otherImageStyle}/>
<Image source={require('./img/icon_3.png')} style={styles.otherImageStyle}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// backgroundColor: '#F5FCFF',
backgroundColor: '#dddddd',
alignItems:'center'
},
iconStyle:{
marginTop: 30,
marginBottom: 30,
width: 80,
height: 80,
borderRadius: 40,
borderWidth: 2,
borderColor: 'white',
},
textInputStyle:{
marginBottom: 1,
width:width,
height: 38,
backgroundColor: 'white',
textAlign :'center'
},
loginBtnStyle:{
height: 35,
width :width*0.7,
marginTop: 30,
marginBottom: 30,
backgroundColor: 'lightgreen',
justifyContent:'center',
alignItems:'center',
borderRadius: 8,
},
SettingStyle:{
flexDirection:'row',
// backgroundColor:'red',
width: width*0.7,
justifyContent:'space-between'
},
otherLoginStyle:{
// backgroundColor: 'red',
flexDirection: 'row',
alignItems: 'center',
position: 'absolute',
bottom:10,
left:20,
} ,
otherImageStyle:{
width: 50,
height: 50,
borderRadius: 25,
marginLeft: 8,
}
});
module.exports = loginView;
image.png
网友评论