無星的RN學習之旅（十）-一份不太嚴謹的入門教程

時間 2019-12-05

標籤學習之旅一份嚴謹入門教程简体版

原文原文鏈接

寫在前面

菜雞，半個iOS開發，js瞭解不深刻，看法不必定正確，有錯指出，意會一下這個意思就好了，大牛就不必看了、、、css

背景

如下全部是基於mac的，Windows老哥只能參考着看了前端

cmd = ctrl ， option = altnode

1、環境安裝

其實官方的環境安裝教程很簡單，但也不排除有老哥看不懂，因此仍是再贅述一下，下面是mac的傻瓜式環境安裝教程（安裝好了的不用看，windows老哥挑着看）react

打開終端，咱們開始了linux

1.開啓任意來源

sudo spctl --master-disable
複製代碼

輸入mac的開機密碼，敲回車（linux或類linux系統，輸入密碼不會提示輸入了，界面是空白的，不要覺得是鍵盤壞了或者沒輸入）android

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
複製代碼

安裝完畢之後輸入ios

vi ~/.bash_profile
複製代碼

按i進入編輯，在後面粘貼以下環境git

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
複製代碼

按esc 依次輸入三個字符 : w q (中間不要有空格)github

輸入web

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的註冊入口,點進去粗略的咱們看下