React Native环境配置 & 迷你加法器实现

这学期我选了一门叫Smart Phone Application Development的课，本着PM要了解移动端开发的心态入了坑。结果是，上课走神so easy，下课大作业so crazy...

个人小作业是学用一种跨平台IDE并在UI上实现一个输入3个数字按钮求和的功能，并写一个对应的tutorial。这里我选了FaceBook的React Native，JavaScript零基础，一路踩坑。

本文对应作业更新一版中文的iOS系统下的tutorial。

//

React Native是Facebook推出的一个用JavaScript语言就能同时编写iOS、Android和后台的技术，基于前端开发框架React。也就是说，只用这一门技术，程序员就可以同时写出Android APP和iOS APP，并且可以做到实时更新。Facebook称这门技术是“Learn Once, Write Anywhere”。

React Native允许开发者使用JavaScript作为开发语言，像写网页一样用JSX语法布局页面，React引擎会把JSX语法翻译成终端的布局，并依赖终端的能力显示页面。从原理上讲，React Native是一个庞大的工程，其代码囊括C++、JavaScript和Objective-C，整体架构从Web渲染到内核通道再到终端绘制，非常复杂。

相比其他跨平台方案，使用React Native开发跨平台移动APP在不牺牲用户体验和应用质量的前提下，提高了开发效率，使用一套代码即可实现在Android、iOS和Web平台上运行，节约了成本，得到了广大移动开发者的追捧。

大概结构图如下：

首先，iOS和Android的环境必备，电脑上已经安装了Xcode和Android SDK，这里不再赘述。

• 安装Homebrew套件管理器，我的电脑上已经安装过，如果没有在终端命令：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安装Node.js,链接：https://nodejs.org/en/download/

• 安装React Native，终端命令

  $npm install -g react-native-cli

  然而安装之后开始了大规模error。重新加上sudo获取最高权限就能重新成功安装。

  
  

React Native安装成功：

• Watchman是一个监控bug和文件变化的插件，命令

  $brew install watchman

  
  

配置好环境之后就可以自己生成新工程了，但试了几次都成功不了，会在

“Installing required CocoaPods dependencies”这快要成功的最后一步一步卡死，查阅了一些资料后发现CocoaPods这里有个坑。

CocoaPods是一个基于Ruby、负责管理iOS项目中第三方开源库的工具，它可以集中统一管理第三方开源库，节省设置和更新第三方开源库的时间。这里卡死的原因是ruby 的软件源（ https://rubygems.org ）使用的是亚马逊的云服务（但我明明用了HKU的VPN了啊！）。国内RubyChina社区维护了一个镜像源（https://gems.ruby-china.com），换成这个地址即可。

• CocoaPods安在和之前Node.js一样的地址下面，找到安装位置打开：
  

    $sudo rm -rf usr/local/bin/pod

• 查看Ruby gem安装的东西：
  

    $gem list

• 把每一项包含CocoaPods的都删掉:
  

    $sudo gem uninstall cocoapods cocoapods-xxxx

• 删除原有的源，添加国内的源路径:
  

  $gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

• 检查一下是不是只有这一个源:
  

    $gem sources -l

是的话重新安装Cocoapods就可以了，如下图：

这时再重新初始化工程包就成功了，终端命令

$react-native init 项目名称

我用的名称是ReactNativeDemo。成功后终端给出了针对iOS和Android的运行指引，按照这些命令操作就可以跑起来了～

打开工程包文件夹，结构如图。

ios和android文件夹分别对应两种环境的原生项目包，修改App.js即可修改项目，index.ios.js 和 index.android.js是平台对应入口，node_modules文件夹是为Node.js存放和管理npm包资源，也包含React Native框架文件。

按照运行指引，打开iOS文件夹启动ReactNativeDemo.xcworkspace文件，在Xcode里面点击RUN按钮就可以在emulator里面运行了。

终端提示运行成功的（傻傻的）画面：

emulator里面可以看到自带的UI界面，如下图。到这里终于运行成功了第一个项目，下一步就可以开始实现作业要求的功能了。

题目原文如下：

To demonstrate your understanding on the IDE, please show us how to use the IDE to develop a simple application as described below:

• A user can enter 3 numbers and there is a button on the same user interface. Upon the button is clicked, the sum of the 3 numbers will be calculated and the result will be displayed on the same user interface.

输入3个数字，按按钮之后计算和，显示结果。

打开App.js文件进行修改，存储刷新后没有bug可立即看到emulator上的更新UI。

继续沿用初始项目的layout，添加Component；Button、TextInput。

与Java的输入文本的EditText不同的是react js调用了TextInput来完成输入文本的功能，没有id可以协助其获取其输入值。因此需要定义3个相应状态来协助取值。当输入的文本发生改变时，更新状态。

另外TextInput的取值为文本格式，需要转换成数字才可以完成加法运算。

求和之后，用alert功能弹出计算结果。

输入数字时设定使用数字键盘。

按下按钮时执行Sum函数，运算并弹出结果。

最后，基于iOS实现的功能UI如下图，输入3个数字后，点击按钮，得到弹出的总和结果。

由于Android Studio的emulator运行起来太大了，我脆弱的小电脑实在是承载不了，没有成功运行Android项目。

不过小作业tutorial总算顺利完成了，可以到用RN做大作业的下一步了。做完这个作业我决定把期末考试的记分标准换成P/F，不计绩点保平安。

主要参考资料：

1. https://www.jianshu.com/p/d35e1b495dd8

2. https://www.youtube.com/watch?v=PrkxUTEbZmI

3. https://blog.csdn.net/autom_lishun/article/details/52709676?ops_request_misc=&request_id=&biz_id=102&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2

4. 《给产品经理讲技术》

5. 《React Native开发实战》

6. HKU COMP7506 课程课件
   
   
   

  - End -  

扫描二维码

关注馒头