无星的RN学习之旅（十）-一份不太严谨的入门教程

写在前面

菜鸡，半个iOS开发，js了解不深刻，看法不必定正确，有错指出，意会一下这个意思就好了，大牛就不必看了、、、

背景

如下全部是基于mac的，Windows老哥只能参考着看了

cmd = ctrl ， option = alt

1、环境安装

其实官方的环境安装教程很简单，但也不排除有老哥看不懂，因此仍是再赘述一下，下面是mac的傻瓜式环境安装教程（安装好了的不用看，windows老哥挑着看）

打开终端，咱们开始了

1.开启任意来源

sudo spctl --master-disable
复制代码

输入mac的开机密码，敲回车（linux或类linux系统，输入密码不会提示输入了，界面是空白的，不要觉得是键盘坏了或者没输入）

2.安装homebrew

homebrew是mac上的包管理器，能很是方便的管理咱们的各类环境和路径依赖，久了你就知道好处了。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
复制代码

3.安装nvm

nvm是用来管理node版本的，若是直接使用brew安装node你会发现装的是最新版本（非稳定版），使用nvm能够很方便的管理本机的node环境

警告：不建议使用brew安装nvm，若是你非要用brew装，你在使用node命令的时候提示没有更名了记得悬崖勒马。。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
复制代码

安装完毕之后输入

vi ~/.bash_profile
复制代码

按i进入编辑，在后面粘贴以下环境

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
复制代码

按esc 依次输入三个字符 : w q (中间不要有空格)

输入

source .bash_profile
复制代码

运行完毕之后重启终端，输入nvm并回车，若是识别了nvm命令则nvm安装完毕

4.使用nvm安装最新的node稳定版本

打开终端输入

nvm ls-remote
复制代码

查看最高的稳定版本（后面会有绿色字体标识lts） 输入

nvm install 版本号
复制代码

例如：

nvm install v8.12.0
复制代码

安装完毕之后输入刚刚安装的版本号

nvm use 版本号
复制代码

例如

nvm use v8.12.0
复制代码

完成之后，输入如下命令查看当前机子的node版本看与安装使用的是否一致

node -v
复制代码

至此，node和npm安装完毕

5.安装nrm

nrm是管理源的，相信看过看多文章都说npm源切成淘宝源或者其余什么源。

打开终端输入

npm install -g nrm
复制代码

安装完毕后输入

nrm ls
复制代码

查看可用版本源

输入

nrm use 源
复制代码

例如：

nrm use npm
复制代码

6.安装react-native

打开终端依次输入

brew install watchman
复制代码

Watchman是由Facebook提供的监视文件系统变动的工具。安装此工具能够提升开发时的性能（packager 能够快速捕捉文件的变化从而实现实时刷新）

brew install yarn --without-node
复制代码

安装yarn，用于react-native的包管理依赖（npm和yarn的区别能够自行百度），上面咱们已经安装了nvm控制node，因此这里安装yarn的时候不要安装node，记得加上--without-node

npm install -g react-native-cli
复制代码

安装react-native-cli，是一个脚手架，方便进行react-native的一些命令操做

至此，react-native环境安装完毕

2、开发工具下载

Xcode	Android Studio	Chrome	VSCode/Webstrom
iOS开发必备	安卓开发必备	调试必备	js开发必备

这里就不给下载连接了，本身下去吧

3、建立第一个项目

1.建立项目

打开终端,cd到桌面目录下

cd Desktop/
复制代码

建立你的第一个App（默认是最新版本，写这篇文章的时候最新版本是0.57.4版本）

react-native init FirstApp
复制代码

若是你想建立一个指定版本,例如0.57.4版本

react-native init FirstApp --version 0.57.4
复制代码

从图中咱们能够看到，整个安装作了三件事

安装react-native，安装react，安装jest

安装完的图就不截了，没钱办网，流量挺贵的。。。

咱们如今安装完了，开始运行。

2.运行项目

有2种运行方式

1.使用命令行启动项目

1.cd到项目根目录下

cd /Users/mac/Desktop/FirstApp   
复制代码

2.启动iOS

react-native run-ios
复制代码

启动安卓(安卓须要自行安装安卓模拟器，或者连接真机)

react-native run-android
复制代码

2.使用Xcode或者Android Studio（如下简称AS）启动。（推荐）

从图中能够看到，项目下面有两个命名为Android和iOS的文件夹，里面分别放着安卓和iOS工程，全部的起源，就是这两个目录。这里咱们以iOS举例（安卓的我就不讲了，毕竟也不会emmm）

咱们双击打开xcodeproj，就能够从xcode启动项目了。

3.项目文件大体说明

看图应该都能看明白

下面咱们对各文件大体进行说明。 分别用xcode和webstrom（vscode）打开项目文件

（1）app.json

---

（2）package.json

相似iOS中经常使用的三方库管理工具cocoapods的profile文件，用于三方库的管理。

从图中能够看到，有不少东西，咱们一个个说

name，version，private，这三个应该不用我说。。不知道也不要紧，不影响你的开发

scripts

脚本，在开发过程当中咱们可能会输入各类经常使用命令，好比启动node服务、iOS的bundle包打包、安卓的apk打包、eslint的代码检查等，每次记那么一堆命令烦都烦死了，这时候就能够用到这个脚本了，你能够将一些经常使用命令放到这里，并赋予一个缩写单词，执行的时候只要在项目根目录下输入

npm run 缩写
复制代码

来执行相关命令。在这里我写一个经常使用命令 iOS的bundle包打包命令（可查看文章无星的RN学习之旅（七）——iOS打包（图文教程版））

react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
复制代码

能够将这个命令粘贴到scripts中，例如：

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "iosbundle": "react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.jsbundle --platform ios --assets-dest ./ios/bundle --dev false"
  },
复制代码

执行的时候，只须要输入以下命令便可完成打包

npm run iosbundle
复制代码

dependencies

开发过程当中用到的三方库的依赖管理

各位确定在git上下载过各类项目，下载下来第一件事就是作npm install或者是yarn

其实就是下载这里标记的三方库。且这里标记的三方库会打入到正式包中。

咱们在其中的版本有时候常常能看见^,这个^有什么做用能够百度一下，不作延展。

devDependencies

下载包的时候，使用npm和yarn命令下载，有的时候会添加--dev，例如eslint（大部分公司都会使用这个进行代码风格控制无星的RN学习之旅（九）-ESLint引入），这些三方库只在开发过程当中须要用到，不必打包到正式包中增长体积。

这些只在开发过程当中使用而不须要打包到正式包中的库，下载时记得添加--dev，最后会被标记到devDependencies这个下面

jest

jest自己是一个测试库，能够理解为执行单元测试的一个三方库，具体做用能够百度，这里不作延展。

---

（3）yarn.lock

上面留了个坑，查询dependencies版本中的^的做用，yarn.lock与此有关，百度了的同窗必定知道是什么做用

（4）.node_modules

全部的三方库的源文件都在这个文件夹中，react-native，react都是做为三方库的框架在整个app中，因此在node_modules你也能看见它们。和原生项目的三方库引入同样，这里引入的三方库，通过

react-native link
复制代码

link之后，会被添加到各自原生项目的三方库依赖中，好比在iOS中你会发现，引入的三方库在librarys下面都能找到。

（通常状况下，npm和yarn进行三方库下载的时候会自动执行link操做，若是没执行的话就本身手动执行一次）

因此若是项目执行中出现 library -link xxxx not found

能够先看看报错的库本身是否用，是否在这里引入link了。

（5）.webstrom打开文件，你还能看见一个.babelrc的文件

这个文件是个编译器文件（好像是），具体能够百度一下，通常状况下用不上，若是碰到三方库须要作什么配置的，三方库的说明文档必定会写明如何配置。这里也很少说了（由于我也不会，emmmm）

（6）.Android文件夹，不提，由于不懂

（7）.iOS文件夹（不是iOS开发能够不用看，直接跳过）

里面放的是iOS的原生项目，其实rn就是在原生项目里面套了个壳子，其余都是view在不停滑动（能够看下无星的RN学习之旅（四）——通讯、持久化存储、iOS打包这里面记录了一些感想，文章名字是后改的，emmm）

打开iOS项目AppDelegate.m中就是一切的开始

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"FirstApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}
复制代码

懒得截图了，直接复制到这说。 jsCodeLocation，这就是rn的东西了，你能够把这当作rn的入口。

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
复制代码

第一个参数是项目中对应的js文件名，这里就是入口了，通常就写index，不作变更，由于项目初始化里面有个index。js，固然改动也无所谓，只要一一对应便可。index.js在下面讲

[RCTBundleURLProvider sharedSettings]点进去源码，你会发现其实获得一个本机内网ip地址，用来指向node服务开启后的文件源路径。

因此咱们也能够本身改动一下，其实只要指向node服务的本地路径便可。 例如:

jsCodeLocation = [NSURL URLWithString:@"http://xxx.xxx.xxx.xxx:8081/index.bundle?platform=ios&dev=true"];
复制代码

ip写本身的本地内网ip，8081是node服务的默认端口，若是你改动过就变成对应的端口，platform=ios，平台是ios平台，dev=true标识是开发状态。 这样也能正常链接上你的node服务。

若是使用codePush（热更新），那么天然会变成codePush上放置jsbundle文件的地址，入门教程，就很少谈了。

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"FirstApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  
复制代码

看见这个moduleName了吗，还记得以前说的package.json文件中name和app.json中的name吗，记得一一对应。否则会报错。

另外，实测，后面两个参数均可以是nil，依旧能够得出RCTRootView。所以能够自定义ctrl做为rootctrl，添加RCTRootView，不必定要放在appdelegate里。

另外

这里有一个脚本，做用是干啥的，能够百度一下，埋个坑不填，从0.4几老版本升级上来的同窗必定改动过（我说的是升级不是迁移）。

（8）.index.js

上面iOS文件夹项目的解析中说了，这是对应的rn文件入口。相信有些同窗看过其余的rn教程，里面写的可能都是index.ios.js或者index.android.js。其实都是一个东西，在0.4几的版本中将其合并了，变成了index.js。

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
复制代码

AppRegistry.registerComponent，从名字咱们也能看出来，这是App的注册入口,点进去粗略的咱们看下

一共三个参数，string型，component，布尔型(可选)，第一个传了appName是个sting型，第二个确定传的是component。

---

这时候应该有同窗要提出两个问题，()=>是啥？component又是啥？

()=>是啥？

()=>是个箭头函数，ES6语法，后面经常跟一个方法体，不跟就理解为直接return 了一个对象。能够理解为就是一个方法，function(){}，前端中常用this（相似于iOS的self），通常得是当前类的实例化对象，若是在加了static的方法中（类方法）使用this，指的就是类自己。

this的做用域问题（iOS在block中用self有时候self指向的也不是当前类这个问题）确定常常有人吃亏，一有两种解决方式： 1使用bind来解决2.使用箭头函数

因此箭头函数就是能解决this做用域问题的一个function。

component又是啥？

前端确定知道啥是component，不提。

iOS同窗，把他当作webkit框架，全部的UI控件有关的东西都继承自它。

安卓同窗不知道，全部的UI控件有关的东西都继承自它。

---

闲话少扯，咱们回到以前的地方

一共三个参数，string型，component，布尔型(可选)，第一个传了appName是个sting型，第二个确定传的是component咱们看到，是return了一个APP。

细心的朋友注意到，import的东西有的加了{}，有的没加，咱们等会说这个。

（9）.App.js

语法，css，这些不讲，本身查文档就能搞定。

export，导出，全部在外部引用的东西，都须要用export这个关键字进行导出。

export default，默认导出。

这时候能够回答上面那个问题，没有加default的，须要用{}包裹，且导出的名字和import的名字一一对应。添加了default的，不须要用{}包裹，且能够更名字，任意更名都指向默认导出的东西。

因此我我的习惯使用export不加default，由于名字和导出名一一对应，代码阅读更加清晰。看我的习惯使用哪种。

咱们能够看见，App继承自自component，return了一个大UI组件（return只能return一个组件，所以最外层必须用一个组件来包裹）。这和前面的要求类型相符合。没问题。

所以你能够在这里进行任意页面的更改。打开模拟器

Windows用户使用ctrl代替cmd

(ios)cmd+r进行刷新 (安卓)cmd+m选reload 进行刷新

会即时的将更改展示在你的页面上。

整个新项目就解析完毕

四，如何debug

安装Chrome之后

运行项目，项目启动之后，在模拟器的界面上

ios cmd+d 安卓 cmd+m 选择第二个选项，进行debug，chrome会自动启动。

谷歌浏览器启动，等待模拟器项目启动完毕cmd+j，选择source，侧边栏出现的就是本次app启动的文件，能够进行debug了。