学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
React Native的组件化很简单,基本步骤如下
// 引用
import React, { Component } from 'react';
import {
需要用到的组件库
} from 'react-native';
// 实例化视图入口
// 因为现在还是在想ES6转化过程中,为了更好的兼容性,这边使用的是ES5的格式
var 组件名 = React.createClass({
render(){
return(
需要实例化的视图
);
}
});
// 视图样式入口
// 因为现在还是在想ES6转化过程中,为了更好的兼容性,这边使用的是ES5的格式
var styles = StyleSheet.create({
相应视图的样式
});
module.exports = 组件名;
生成组件后就可以在ios和android中使用生成后的组件了
// 引入组件库
var 自定义组件名 = require('./组件名');
export default class TestRN2 extends Component {
render() {
return (
<自定义组件名>
);
}
}
先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
// 实例化入口
var Login = React.createClass({
render() {
return (
);
}
});
// 样式
var styles = StyleSheet.create({
container: {
flex:1,
// 背景色
backgroundColor:'white'
},
});
// 注册输出组件
module.exports = Login;
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet
} from 'react-native';
// 引用Login组件
var Login = require('./Login');
export default class WeiXin extends Component {
render() {
return (
{/* 登录模块 */}
);
}
}
效果:
我们把界面整体分为上下2大部分,先将这两部分搞出来
// 视图
var Login = React.createClass({
render() {
return(
<View style={styles.container}>
{/* 上部登录框 */}
<View style={styles.loginViewStyle}>
View>
{/* 下部更多登录方式 */}
<View style={styles.moreLoginViewStyle}>
View>
View>
);
}
});
// 样式
var styles = StyleSheet.create({
container: {
flex:1,
// 背景色
backgroundColor:'white',
// 对齐方式
justifyContent:'space-between',
alignItems:'center'
},
loginViewStyle: {
// 尺寸
width:width * 0.9,
height:300, // 预设,等会会清除
// 背景色
backgroundColor:'red',
// 上边距
marginTop:85
},
moreLoginViewStyle: {
// 尺寸
width:width * 0.9,
height:40, // 预设,等会会清除
// 背景色
backgroundColor:'red',
// 下边距
marginBottom:30
}
});
接着我们来具体完成上面登录框中的各个模块
// 视图
var Login = React.createClass({
render() {
return(
<View style={styles.container}>
{/* 上部登录框 */}
<View style={styles.loginViewStyle}>
{/* 头像 */}
<Image source={{uri:'icon'}} style={styles.iconStyle}>Image>
{/* 账号 */}
<Text style={{fontSize:17, margin:10}}>12345Text>
{/* 密码输入框 */}
<View style={styles.passwordViewStyle}>
{/* 左边图片 */}
<Image source={{uri:'password'}} style={styles.passwordImageStyle}>Image>
{/* 右边输入框 */}
<TextInput style={styles.passwordInputStyle}
placeholder='请填写密码'
>TextInput>
View>
{/* 登录按钮 */}
<View style={styles.loginButtonStyle}>
<Text style={{fontSize:17, color:'white'}}>登 录Text>
View>
{/* 忘记密码选项 */}
<Text style={{fontSize:15, color:'blue', marginTop: 15}}>登录遇到问题?Text>
View>
{/* 下部更多登录方式 */}
<View style={styles.moreLoginViewStyle}>
View>
View>
);
}
});
// 样式
var styles = StyleSheet.create({
container: {
flex:1,
// 背景色
backgroundColor:'white',
// 对齐方式
justifyContent:'space-between',
alignItems:'center'
},
loginViewStyle: {
// 尺寸
width:width * 0.9,
// 背景色
backgroundColor:'red',
// 上边距
marginTop:85,
// 对齐方式
alignItems:'center'
},
iconStyle: {
// 尺寸
width:iconWH,
height:iconWH
},
passwordViewStyle: {
// 尺寸
width:width * 0.9,
height:passwordViewH,
// 背景色
backgroundColor:'yellow',
// 上边距
marginTop:20,
// 主轴方向
flexDirection:'row',
// 对齐方式
alignItems:'center',
// 下边框
borderBottomWidth:1,
borderBottomColor:'green'
},
passwordImageStyle: {
// 尺寸
width:passwordImageWH,
height:passwordImageWH,
// 图片填充方式
resizeMode:'contain',
// 左边距
marginLeft:passwordMargin
},
passwordInputStyle: {
// 尺寸
width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),
height:passwordViewH,
// 背景色
backgroundColor:'white',
// 左边距
marginLeft:passwordMargin
},
loginButtonStyle: {
// 尺寸
width:width * 0.9,
height:44,
// 背景色
backgroundColor:'green',
// 上边距
marginTop:20,
// 居中对齐
justifyContent:'center',
alignItems:'center'
},
moreLoginViewStyle: {
// 尺寸
width:width * 0.9,
height:40,
// 背景色
backgroundColor:'red',
// 下边距
marginBottom:30
}
});
接下来我们来完成下半部分
{/* 下部更多登录方式 */}
<View style={styles.moreLoginViewStyle}>
<Text style={{color:'blue', fontSize:17}}>更多Text>
View>
moreLoginViewStyle: {
// 尺寸
width:width * 0.9,
height:40,
// 背景色
backgroundColor:'red',
// 下边距
marginBottom:30,
// 对齐方式
alignItems:'center',
justifyContent:'center'
}
接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力,这边就以更多
为例
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {alert('点击了更多')}}
>
{/* 下部更多登录方式 */}
<View style={styles.moreLoginViewStyle}>
<Text style={{color:'blue', fontSize:17}}>更多Text>
View>
TouchableOpacity>
最后将组件完整的代码和效果图贴出来,供参考
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image,
TouchableOpacity
} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
// 常用参数
var iconWH = 70;
var passwordViewH = 30;
var passwordImageWH = 25;
var passwordMargin = 5;
// 视图
var Login = React.createClass({
render() {
return(
{/* 上部登录框 */}
0.5}
onPress={() => {alert('点击了头像')}}
>
{/* 头像 */}
'icon'}} style={styles.iconStyle}>
{/* 账号 */}
17, margin:10}}>12345
{/* 密码输入框 */}
{/* 左边图片 */}
'password'}} style={styles.passwordImageStyle}>
{/* 右边输入框 */}
'请填写密码'
>
0.5}
onPress={() => {alert('点击了登录按钮')}}
>
{/* 登录按钮 */}
17, color:'white'}}>登 录
0.5}
onPress={() => {alert('点击了忘记密码选项')}}
>
{/* 忘记密码选项 */}
15, color:'blue', marginTop: 15}}>登录遇到问题?
0.5}
onPress={() => {alert('点击了更多')}}
>
{/* 下部更多登录方式 */}
'blue', fontSize:17}}>更多
);
}
});
// 样式
var styles = StyleSheet.create({
container: {
flex:1,
// 背景色
backgroundColor:'white',
// 对齐方式
justifyContent:'space-between',
alignItems:'center'
},
loginViewStyle: {
// 尺寸
width:width * 0.9,
// 上边距
marginTop:85,
// 对齐方式
alignItems:'center'
},
iconStyle: {
// 尺寸
width:iconWH,
height:iconWH
},
passwordViewStyle: {
// 尺寸
width:width * 0.9,
height:passwordViewH,
// 上边距
marginTop:20,
// 主轴方向
flexDirection:'row',
// 对齐方式
alignItems:'center',
// 下边框
borderBottomWidth:1,
borderBottomColor:'green'
},
passwordImageStyle: {
// 尺寸
width:passwordImageWH,
height:passwordImageWH,
// 图片填充方式
resizeMode:'contain',
// 左边距
marginLeft:passwordMargin
},
passwordInputStyle: {
// 尺寸
width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),
height:passwordViewH,
// 左边距
marginLeft:passwordMargin
},
loginButtonStyle: {
// 尺寸
width:width * 0.9,
height:44,
// 背景色
backgroundColor:'green',
// 上边距
marginTop:20,
// 居中对齐
justifyContent:'center',
alignItems:'center'
},
moreLoginViewStyle: {
// 尺寸
width:width * 0.9,
height:40,
// 下边距
marginBottom:30,
// 对齐方式
alignItems:'center',
justifyContent:'center'
}
});
module.exports = Login;