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