专栏首页京程一灯React-Native入门指南(一)

React-Native入门指南(一)

童鞋们注意啦,注意啦,注意啦!

今天开始,一灯科技将恢复更新。

本周将会为大家献上React-Native入门指南系列文章,纯干货,请偷偷观看!

一、环境配置 & Hello World

1、前言

最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动,学了点Object-c,这次正好借此机会进入App开发,以弥补自己在Native-App上的经验不足。

2、环境配置

(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。 (2)在Mac上安装Xcode,建议Xcode 6.3以上版本 (3)安装node.js:https://nodejs.org/download/ (4)建议安装watchman,终端命令:brew install watchman (5)安装flow:brew install flow

ok,按照以上步骤,你应该已经配置好了环境。

3、Hello, React-Native

现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:

打开终端,开始React-Native开发的旅程吧。 (1)安装命令行工具:sudo npm install -g react-native-cli (2)创建一个空项目:react-native init HelloWorld (3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。 (4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。 启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

4、改改HelloWorld

Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹, 找到index.ios.js文件。index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一些文本,下一篇会解

读里面的代码。用文本编辑器打开index.ios.js文件。 (1)找到代码<Text></Text>部分: <Text style={styles.welcome}> Welcome to React Native! </Text> 修改成如下: <Text style={styles.welcome}> React-Native入门学习 </Text>

(2)找到代码

welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, 修改成如下: welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: 'red', }, (3)有web开发经验的你,上面的修改你一定会体会到些什么。点击模拟器,

cmd + R,刷新视图,会看到如下截图:

5、恭喜你,万里长征已经走了1000步

如果有过web开发经验的你,一定觉得很容易理解和学习React-Native,所以这一小步也是一大步(1000步)。千里之行,始于此步。

二、代码结构

1、了解index.ios.js

大家都清楚,React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。 用编辑器打开index.ios.js文件,分析代码结构: (1)第一句:var React = require('react-native');有Node.js开发经验的同学都清楚,require可以引入其他模块。如果没有node.js开发经验的同学,可以脑补下java的import和c++的#include。 (2)第二句代码,批量定义组件: var { AppRegistry, StyleSheet, Text, View, } = React; 其实,这只是一个语法糖而已,比如AppRegistry我们可以这样定义:var AppRegistry = React.AppRegistry; (3)构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法,可以提前学习下。 (4)相对于web开发,我们需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。 (5)如何引入css样式?其实在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式。 (6)注册应用入口,这个一定不能少,否则模拟器会提示报错: AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

2、其实你还需要看点这方面的知识

对于React-Native开发,仅仅有基础前端开发的知识是不够的,你还需要了解和掌握的有:

  • Node.js基础
  • JSX语法基础
  • Flexbox布局

3、目前需要关注的文件

目前阶段有几个文件时需要注意下的:

(1)在xcode项目代码中AppDelegate.m会标识入口文件,例如: jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 如果是网上下载别人的源码,注意此处的ip和端口是否有被修改。

(2)闪屏界面在哪修改?在xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。

(3)文本编辑器打开index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块。

4、修改文件index.ios.js

(1)修改启动界面,如下图

(2)添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个<Text>,增加我们需要的图片,因为图片更具表达力,就像最近的图片社交应用很火一样。

1)添加Image组件,将代码修改成如下即可: var { StyleSheet, Text, View, Image, } = React; 2)将render返回中的模版增加Image组件视图,具体如下: render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> React-Native入门学习 </Text> <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}> </Image> </View> ); } 其中,Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址。

3)修改图片视图的样式,删除多余的样式,增加pic样式: var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: 'red', }, pic: { width:100, height:100, } }); 4)可以cmd + Q 停止模拟器,然后再cmd + R开启模拟器,你会发现启动界面和首页都你想要的样子:

如果终端被关闭了怎么办

不用担心,其实只要你切到项目的根目录,命令行输入npm start即可,这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。

三、CSS和UI布局

1、了解React-Native组件

作为开发者都知道,UI组件对于一个应用的重要性。也许,在一款应用中,你还没有完整的,有体系的构建UI组件,但是你一定或多或少有种想把组件抽出来的冲动,就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一化是十分必要的。常见的组件有:日历、下拉列表(常在应用中表现为下拉刷新)、导航栏、头部、底部、选项卡等等。React-Native就提供了一套iOS原生的组件,这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局,使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图:

2、使用CSS样式 & Flexbox布局

第一篇,已经知道了如何构建工程。这里同样创建一个HelloWorld工程。默认启动界面如下图:

(1)基本样式

这里使用View和Text组件作为演示对象,首先,修改index.ios.js里面的代码,这里只需要关注StyleSheet和render里面的模板。修改后的代码如下:

/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React;

var HelloWorld = React.createClass({ render: function() { return ( <View> <View></View> </View> ); } }); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld); 这时候,你cmd + R刷新模拟器应该看到是空白的界面。现在,是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象,并且严格区分该对象属性的类型,所以要遵循对象的写法,而不能使用以前css的写法,这个需要自己熟悉了。

1)增加一个带边框的矩形,红色边框 直接在组件上添加样式是这样的:style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性,第一个{}JS执行环境或者说是模板,第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下: render: function() { return ( <View> <View style={{height:40, borderWidth: 1, borderColor: 'red'}}> </View> </View> ); } cmd + R刷新模拟器,结果如下:

2)如何知道该组件支持哪些样式呢? 上面的已经很简单了,作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件有哪些样式,又不想查手册,一个最为简单的方法是,在样式表里写错一个属性,比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去,而不能写为内联样式。写成内联样式,你是看不到报错提示的。我们改写成样式表创建类里面: var HelloWorld = React.createClass({ render: function() { return ( <View> <View style={styles.style_1}> </View> </View> ); } }); var styles = StyleSheet.create({ style_1:{ border: '1px solid red', height:40, borderWidth: 1, borderColor: 'red', } }); 这个时候你就能齐刷刷地看到样式表的报错和提示有哪些样式了,如下图所示:

3)独立样式类 其实上面已经展示了独立样式类了,那么样式类创建很简单,我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的<View style={{对象名称.对象属性}}></View>,就跟上面(2)的代码一样。(2)说说Flexbox布局 其实,这样的css样式,作为web开发者一用就会,那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话,最为重要的就是flexbox,目前支持的属性如下,有6个:

1)先说flex属性,上一段代码 var HelloWorld = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={styles.style_1}></View> <View style={styles.style_1}></View> <View style={{flex:10}}></View> </View> ); } }); var styles = StyleSheet.create({ style_0:{ flex:1, }, style_1:{ flex: 5, height:40, borderWidth: 1, borderColor: 'red', } }); 当一个(元素)组件,定义了flex属性时,表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩,其小于和等于0的时候不伸缩,例如:flex:0, flex:-1等。上面的代码,最外层的view是可伸缩的,因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1/4伸缩空间, 最后一个view占据1/2空间,具体如下图:

2)flexDirection flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)。具体的效果可见如下代码: var HelloWorld = React.createClass({ render: function() { return ( <View style={styles.style_0}> <View style={styles.style_1}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={[styles.style_1, {flexDirection: 'column'}]}> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> <Text style={{marginTop:40, fontSize:25}}>1/4高</Text> </View> <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}> <Text style={{marginTop:40, fontSize:25}}>1/2高</Text> </View> </View> ); } });

var styles = StyleSheet.create({ style_0:{ flex:1, }, style_1:{ flex: 5, flexDirection: 'row', height:40, borderWidth: 1, borderColor: 'red', } }); 具体的效果如下:

3)alignSelf:对齐方式 alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、 auto、 stretch。看看代码,应该就很清楚了:

效果如下图

4)水平垂直居中 alignItems是alignSelf的变种,跟alignSelf的功能类似,可用于水平居中;justifyContent用于垂直居中,属性较多,可以了解下。

效果如下图

本文转载自github大咖个人博客

原作者:vczero

转自:https://github.com/vczero/react-native-lesson

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:vczero

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React-Native入门指南 终章

    在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/...

    疯狂的技术宅
  • React-Native入门指南(二)

    前辈教导我们,掌握一门新技术的最快方法是练习。因此,我找了下比较有爱,暖气的界面。当然不是给美团打广告了,只是觉得页面蛮清新的。下面就是要显示的效果:

    疯狂的技术宅
  • React Native 一年实践回顾

    组内对于 React Native 的实践已经快一年了,我们组主要负责的是美团外卖 M 端的前端业务,涵盖了美团外卖的 CRM、供应链、合同和结算等系统,我们的...

    疯狂的技术宅
  • React-Native入门指南 终章

    在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/...

    疯狂的技术宅
  • chapter01

    React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

    风语者14
  • 边缘计算笔记(一): Jetson TX2上从TensorFlow 到TensorRT

    NVIDIA去年发布了一个线上讲座,题目是《 AI at the Edge TensorFlow to TensorRT on Jetson 》。

    GPUS Lady
  • SD-WAN+uCPE:巨额市场究竟花落谁家?

    随着SD-WAN技术的不断迭代,它必须适合以云为中心的架构,以提供不同类别的服务。通过uCPE方法,提供商可以在低成本平台上部署虚拟化服务,从而实现各种虚拟网络...

    SDNLAB
  • Selenium:添加Cookie的方法

    从中可以看出add_cookie()这个函数有一个参数cookie_dict,它是以字典的形式传入的,字典中必选的键是"name"和"value",可选的键是"...

    弄啥嘞
  • LeetCode 368. Largest Divisible Subset分析代码

    这里需要发现一个规律,就是如果result中已经有【1,2】,那么对于要新加进来的数,只要它能整除掉result中最大的数就可以,因为如果先把result按大小...

    desperate633
  • 《I Pencil》一文分享

    生活在城市里的人,都非常喜欢大自然,经常赞叹大自然的美好与神奇,但对自己身边的生活却熟视无睹。其实人类社会有许多精彩的地方,只是我们缺乏慧眼去欣赏而已。就拿我们...

    Defu Li

扫码关注云+社区

领取腾讯云代金券