前言

  • 学习本系列内容需要具备一定 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 之 组件化开发的更多相关文章

  1. 采用React+Ant Design组件化开发前端界面(一)

    react-start 基础知识 1.使用脚手架创建项目并启动 ​ 1.1 安装脚手架: npm install -g create-react-app ​ 1.2 使用脚手架创建项目: create ...

  2. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  3. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  4. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  5. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  6. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  7. 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  8. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

  9. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

随机推荐

  1. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. API Monitor简介(API监控工具)

    API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得了API调用. 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题. 64位支持 API ...

  3. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  4. 如何在 TFS 中使用 Git

    对 Charley Blog 的代码进行版本控制的想法由来已久,在代码建立之初其实已经使用过 TFS 进行控制,只是后期没能好好用起来,加之后来系统环境的变化导致TFS连接丢失,便算是正式放弃了版本控 ...

  5. 学会使用Spring注解

      概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 ...

  6. EMC与地之重新认识地

    记得在Mark的培训中,他手上拿了一个无线鼠标,然后问了一个很有意思的问题:“这个无线鼠标的地在哪里?同样,我们的手机没有和任何大地有接 触,那么这个地又在哪里呢?”这个问题确实很有意思,也确实让人很 ...

  7. (转)面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  8. Node+fs+定时器(node-schedule)+MySql

    目标:将本人写博客时候的截图保存到桌面的图片 执行保存到指定文件进行整理 并写入数据库 先看最终的目录结构: package.json文件: { "name": "zqz ...

  9. 【转】利用反射快速给Model实体赋值

    原文地址:http://blog.csdn.net/gxiangzi/article/details/8629064 试想这样一个业务需求:有一张合同表,由于合同涉及内容比较多所以此表比较庞大,大概有 ...

  10. vue.js 开发生态总结

    ---title: Vue 1.0 的技术栈date: 2016-09-26 00:48:50tags:category:--- ## vuejs概述 Vue.js是用于构建交互式的Web界面的库.它 ...