2018 React-Native(入门指南)学习笔记(一)

第一篇环境配置 & Hello World

一、前言

最近手头的工作繁多，有研究性的项目和系统研发，作为一名iOS原生开发的小学生, 对于突如其来的React-Native / week 等跨平台框架, 说实话我是持拒绝的态度的, 因为我始终相信任何跨屏他开发的框架在性能上与原生的是无法比较的, 仅针对iOS平台来说, 哪怕只是一个很简单的页面, 我也是想坚持用原生写, 当然这属于我个人想法, 我是一个原生论者. 但无论怎样我们都不能否认这些跨平台框架为我们带来的便捷性(当然是对于领导来说), 因为跨平台, 开发一次, 安卓iOS都可以用, 线上更改数据样式比较方便等等''数不胜数''的好处... 扯远了...扯远了...
今天我们主要来学习下React-Native在mac下的环境搭建, 安装, 以及建立第一个React-Native项目.

各位朋友, 各位老司机们, React-Native 24小时恐怖之旅即将启程, 请做好"删库跑路"的准备.

二、环境配置

(1) 需要一台Mac(OSX),这个是前提，建议还是入手一本啦。
(2) 在Mac上安装Xcode,建议Xcode 6.3以上版本
(3) 安装node.js->点击查看(重要)
(4) 建议安装watchman，终端命令：brew install watchman
(5) 安装flow：brew install flow

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

三、第一个React-Native项目 "Hello World!!!"

现在我们需要创建一个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模拟器，具体的效果如下，说明你创建项目成功了。

install_successful.png project_icon.png myFirtsReactNative.png

四、我们来修改下 HelloWorld

Xcode里面的代码目录结构暂时不用管了，打开HelloWorld项目文件夹，找到app.js文件。
app.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,刷新视图,会看到如下截图：

五、恭喜你，万里长征已经走出了第一步!!!

如果有过web开发经验的你，
一定觉得很容易理解和学习React-Native，
所以这一小步也是一大步

千里之行, 始于足下.