React Native 之 组件化开发
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
React Native组件化介绍
React Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方式就是将功能组件化
组件化最大的优点可以使Android和iOS能够很方便地用很少地代码使用同一套组件,增加代码的复用性
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 (
<自定义组件名></自定义组件名>
);
}
}到此,组件化就简单介绍到这,下面用一个综合的实例来更好地帮助理解
React Native组件化综合实例
- 这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用,先来看看微信登录界面长啥样
先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件
- 初始化JS格式
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native'; // 实例化入口
var Login = React.createClass({
render() {
return (
<View style={styles.container}> </View>
);
}
}); // 样式
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 (
<View style={styles.container}>
{/* 登录模块 */}
<Login></Login>
</View>
);
}
}效果:
我们把界面整体分为上下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}}>12345</Text>
{/* 密码输入框 */}
<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(
<View style={styles.container}>
{/* 上部登录框 */}
<View style={styles.loginViewStyle}>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {alert('点击了头像')}}
>
{/* 头像 */}
<Image source={{uri:'icon'}} style={styles.iconStyle}></Image>
</TouchableOpacity>
{/* 账号 */}
<Text style={{fontSize:17, margin:10}}>12345</Text>
{/* 密码输入框 */}
<View style={styles.passwordViewStyle}>
{/* 左边图片 */}
<Image source={{uri:'password'}} style={styles.passwordImageStyle}></Image>
{/* 右边输入框 */}
<TextInput style={styles.passwordInputStyle}
placeholder='请填写密码'
></TextInput>
</View>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {alert('点击了登录按钮')}}
>
{/* 登录按钮 */}
<View style={styles.loginButtonStyle}>
<Text style={{fontSize:17, color:'white'}}>登 录</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {alert('点击了忘记密码选项')}}
>
{/* 忘记密码选项 */}
<Text style={{fontSize:15, color:'blue', marginTop: 15}}>登录遇到问题?</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {alert('点击了更多')}}
>
{/* 下部更多登录方式 */}
<View style={styles.moreLoginViewStyle}>
<Text style={{color:'blue', fontSize:17}}>更多</Text>
</View>
</TouchableOpacity>
</View>
);
}
}); // 样式
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;
效果:
React Native 之 组件化开发的更多相关文章
- 采用React+Ant Design组件化开发前端界面(一)
react-start 基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create ...
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
随机推荐
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- API Monitor简介(API监控工具)
API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得了API调用. 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题. 64位支持 API ...
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- 如何在 TFS 中使用 Git
对 Charley Blog 的代码进行版本控制的想法由来已久,在代码建立之初其实已经使用过 TFS 进行控制,只是后期没能好好用起来,加之后来系统环境的变化导致TFS连接丢失,便算是正式放弃了版本控 ...
- 学会使用Spring注解
概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 ...
- EMC与地之重新认识地
记得在Mark的培训中,他手上拿了一个无线鼠标,然后问了一个很有意思的问题:“这个无线鼠标的地在哪里?同样,我们的手机没有和任何大地有接 触,那么这个地又在哪里呢?”这个问题确实很有意思,也确实让人很 ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- Node+fs+定时器(node-schedule)+MySql
目标:将本人写博客时候的截图保存到桌面的图片 执行保存到指定文件进行整理 并写入数据库 先看最终的目录结构: package.json文件: { "name": "zqz ...
- 【转】利用反射快速给Model实体赋值
原文地址:http://blog.csdn.net/gxiangzi/article/details/8629064 试想这样一个业务需求:有一张合同表,由于合同涉及内容比较多所以此表比较庞大,大概有 ...
- vue.js 开发生态总结
---title: Vue 1.0 的技术栈date: 2016-09-26 00:48:50tags:category:--- ## vuejs概述 Vue.js是用于构建交互式的Web界面的库.它 ...