5 - React Native从入门到入土 简单实现qq登录页
2017-07-23 本文已影响261人
翻滚的炒勺2013
A28CC64A-56A5-4672-885A-00637A58C53C.png
目标:理解React Native面向组件开发
0.桌面新建一个文件夹,打开终端创建一个新工程并运行
react-native init 你工程你的名字
cd 你工程的名字
react-native run-ios
A3E74E46-BA1B-4043-806A-464F498A07C3.png
4FA26CD0-D2B0-4A7A-91E1-5651158D3EDB.png
这个时候模拟器已经运行起来了
4DC5204D-1E3D-4F17-A49E-4C8F37565F35.png
1.用webStorm打开工程,等待读条
07074398-EA02-438D-9784-373D0D4A2A03.png
需要点击switch转换成webStorm可以识别的语言
B9063FAC-86B0-4869-A71F-DC623F52124E.png
081C5E21-0CC0-4649-BB2F-788E4AC8FBB3.png
先来看这个界面,如果在iOS中就是UIImageView,UITextFiled,UIButton,UILabel组成的页面,在react-native中也是差不多的下面是他们的对应关系
|oc| react - native |
| :---- | :----- | :----|:----- |
| UIImageView |Image |
| UITextFiled |TextInput |
| UILabel |Text |
UIButton以后再说
知道要了用哪些控件在react-native中需要导入这些控件
C1CD2C47-FACC-4C2D-A98E-9FE12FF93702.png
代码说明:
<控件的类名(我这样理解的) tyle={styles.loginTextStyle}(设置它是什么样式的) />
Image获取本地图片<Image source={require('./img/icon.png')}/> 图片的目录结构如图:
5094884F-FE3E-4903-843D-47F11CEBC4D1.png
获取当前屏幕的宽度
var Dimensions = require("Dimensions");
var width = Dimensions.get('window').width;
在其他的地方直接调用width即可
代码部分
export default class learnRN extends Component {
render() {
return (
<View style={styles.container}>
/// 创建一个头像Image,样式为iconnStyle}
<Image source={require('./img/icon.png')} style={styles.iconnStyle} />
/// 创建输入框,样式为.textInputStyle, placeholder是占位文字
<TextInput placeholder={"请输入用户名"} style={styles.textInputStyle} />
<TextInput placeholder={"请输入密码"} password={true} style={styles.textInputStyle} />
<View style={styles.loginStyle}>
<Text style={styles.loginTextStyle}> 登录</Text>
</View>
<View style={styles.settingStyle}>
<Text style={styles.settingTextStyle}>无法登录</Text>
<Text style={styles.settingTextStyle}>新用户</Text>
</View>
<View style={styles.otherStyle}>
<Text>其他方式登录</Text>
<Image source={require('./img/icon3.png')} style={styles.otherImageStyle}/>
<Image source={require('./img/icon7.png')} style={styles.otherImageStyle}/>
<Image source={require('./img/icon8.png')} style={styles.otherImageStyle}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
otherImageStyle: {
height:50,
width: 50,
borderRadius:25,
marginLeft:10
},
otherStyle: {
/// 将侧轴设为横向
flexDirection:'row',
/// 竖向中心对齐
alignItems:'center',
/// 设置绝对位置
position:'absolute',
bottom:10,
left:10,
},
settingTextStyle: {
color:'black'
},
settingStyle: {
/// 将侧轴设为横向
flexDirection:'row',
width: width,
/// 设置为;两端对齐
justifyContent:'space-between'
},
loginTextStyle: {
color:'white',
},
loginStyle:{
height:35,
width: width * 0.8,
backgroundColor: 'blue',
justifyContent:'center',
alignItems:'center',
marginTop:30,
marginBottom: 10,
/// 设置圆角
borderRadius:5,
},
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#dddddd',
},
iconnStyle: {
marginTop:50,
marginBottom: 30,
width:80,
height:80,
borderRadius:40,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
textInputStyle:{
height:38,
width: width,
marginBottom: 1,
backgroundColor: 'white',
textAlign:'center'
},
});
组件开发
新创建一个loginView的js文件
将index.ios.js中所有代码赋值到loginView.js
将最后的代码
AppRegistry.registerComponent('learnRN', () => learnRN);
改成如下形式: module.exports和oc中return作用差不多返回这个类
module.exports = loginView;
同时修改类名为loginView
60E8153C-D45E-4C96-8DE0-446506D1A028.png
在index.ios.js中引入loginView这类
var LoginView = require('./loginView');
在主函数中实例化这个类
export default class learnRN extends Component {
render() {
return (
<LoginView />
)
}
}
