最新版React Native環境搭建

語言: CN / TW / HK

工欲善其事,必先利其器。搭建React Native開發環境,需要安裝以下輔助工具。 - Node.js:React Native需要藉助Node.js來創建和運行JavaScript代碼。 - 原生開發工具及環境:React Native的運行需要依賴原生Android和iOS環境,因此需要分別安裝原生Android和iOS的開發環境。 - 其他開發工具:代碼編輯器Visual Studio Code或WebStorm,遠程調試具Chrome瀏覽器等。

一、基礎環境

1.1 安裝Node.js

首先,我們需要安裝Homebrew,Homebrew是一款Mac OS平台下的軟件包管理工具,擁有安裝、卸載、更新、查看、搜索等很多實用的功能,Homebrew的安裝命令如下:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝完Homebrew之後,接下來就是安裝Node 、Watchman和 Yarn等必須的工具。

``` brew install node brew install watchman

使用nrm工具切換淘寶源

npx nrm use taobao

npm install -g yarn ```

需要注意的是,如果還在使用舊版本React Native工具(0.60.0版本以下),為了避免衝突,請使用下面的命令先卸載。 npm uninstall -g react-native-cli

1.2 添加Android原生環境

由於React Native項目的編譯運行需要依賴原生平台,所以在搭建React Native開發環境過程中,需要事先搭建好原生Android和iOS的開發環境。

在搭建原生Android開發環境過程中,由於Android項目的開發和運行需要依賴Java環境,如果還沒有安裝Java環境,可以從JDK官網下載操作系統對應的JDK版本然後進行安裝。安裝成功之後,可以使用java -version命令來驗證Java開發環境,如下圖所示。

image.png

同時,為了方便後面項目中使用Java的命令行,還需要在.bash_profile文件中配置環境變量,如下所示。

```

如果你不是通過Android Studio安裝的sdk,則其路徑可能不同,請自行確定清楚

export ANDROID_HOME=/Users/XXX/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools export PATH=${PATH}:${ANDROID_HOME}/emulator export PATH=${PATH}:${ANDROID_HOME}/tools/bin ```

如果配置文件使用的是~/.zshrc,那麼可以使用下面的命令使上面的配置生效。

source ~/.zshrc

接下來,我們還需要安裝Android開發工具Android Studio和Android開發套件Android SDK Tools。

首先,從Android官網下載最新的Android Studio,安裝完成之後,第一次啟動會自動下載Android SDK,下載Android SDK需要在Android Studio的設置板中配置Android SDK Tools的路徑。

image.png

同樣,為了方便在項目中使用Android命令行工具,還需要配置一下Android系統環境變量。

export ANDROID_HOME="/Users/xxx/Android/sdk" export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools

1.3 添加iOS原生環境

眾所周知,開發iOS應用需要macOS操作系統支持,所以如果經濟條件允許最好準備一台Mac電腦。也只有這樣,才能使用React Native開發可以同時運行在iOS和Android設備上的跨平台應用,發揮React Native跨平台應用開發的優勢。

由於使用React Native開發iOS端的應用時需要Xcode 7及更高版本的支持,如果本地還沒有安裝Xcode應用程序,可以從App Store上下載最新的Xcode進行安裝,

image.png

需要説明的是,Xcode安裝程序必須通過Apple官網或者App Store進行下載,否則容易出現代碼植入和代碼泄漏的風險。比如,2015年9月發生的XcodeGhost非法代碼植入事件,就是因為開發者使用的是非官方的Xcode安裝程序引起的。

同時,React Native項目的原生iOS部分使用的是CocoaPods來管理第三方依賴庫,所以在搭建iOS開發環境時還需要安裝CocoaPods庫管理工具。如果還沒有安裝CocoaPods,可以使用下面的命令進行安裝。

brew install cocoapods

由於React Native項目的運行需要依賴ruby的2.7.5版本,所以請確保本地已經安裝了ruby依賴。如果本地安裝了多個ruby版本,那麼可以使用下面的命令進行切換。

rvm use ruby-2.7.5 --default

二、創建示例項目

2.1 創建項目

React Native支持使用命令和IDE集成開發工具兩種方式來創建項目。其中,使用命令行方式初始化React Native項目如下所示。

npx react-native init RNDemos

需要注意的是,初始化React Native項目時,項目名稱不能包含中文、空格和特殊符號,也不能使用JavaScript關鍵字作為項目名,如 class、native、new等。 同時,React Native在初始化項目時還支持指定版本和項目模板,如下所示。

//指定版本 npx react-native init AwesomeProject --version 0.66.0 //指定模版 npx react-native init AwesomeTSProject --template react-native-template-typescript

當然,除了命令行方式外,我們更推薦使用VSCode或WebStrom等可視化編輯工具來創建React Native項目。

等待React Native項目構建成功之後,系統還會自動安裝項目所需的第三方依賴庫。接着,再使用VSCode或WebStrom打開React Native項目,如下圖所示。

image.png

2.2 運行項目

運行React Native項目之前,需要配置好原生開發環境。即運行iOS 需要正確安裝和配置Xcode工具,運行Android App需要正確安裝和配置Android Studio和Android SDK Tools。 同時,為了能夠正常的運行項目,還需要在項目運行之前啟動模擬器或者真機設備。啟動模擬器或真機後,我們可以使用如下的命令來查看連接情況。

xcrun simctl list devices //查看可用的iOS設備 adb devices //查看可用的Android設備

然後,在項目的根目錄運行執行如下命令即可啟動React Native項目。

//啟動iOS yarn ios或者yarn react-native run-ios //啟動Android yarn android或者yarn react-native run- android

此命令會對項目的原生部分進行編譯,同時在後台啟動Metro服務對 JavaScript代碼進行實時打包處理。當然,Metro服務也可以使用yarn start命令單獨啟動。如果此命令無法正常運行,可以使用Android Studio或者Xcode打開對應的原生工程來查看報錯信息。如果沒有任何錯誤提示,那麼運行效果如下圖所示。

image.png

2.3 調試項目

調試是軟件開發過程中重要的步驟,也是保證軟件質量的重要手段。應用調試不僅可以幫助開發者快讀的定位軟件中存在的問題,同時也是初學者快速理解軟件功能的重要途徑。

由於React Native項目主要使用React前端語言進行開發,所以調試React Native需要使用到Chrome的DevTools,而Chrome瀏覽器默認就集成了這一工具。React Native集成了對Chrome的DevTools的支持,開發者可以很容易地使用它調試React Native應用。

使用真機開發時,調試應用只需要晃動下設備即可打開調試選項。如果開發使用的是模擬器,那麼可以使用快捷鍵來打開調試功能,Android模擬器調試的快捷鍵是【Command +M】,iOS模擬器的快捷鍵是【Command +D】,如下圖所示。

image.png

需要説明的是,如果是使用真機進行調試,需要調試的真機和開發程序的電腦處於同一個Wi-Fi網絡,否則將會出現無法連接的情況。 接着,只需要點擊屏幕上的【Debug】選項即可開啟遠端調試功能。開啟遠端調試時,系統會自動打開Chrome瀏覽器的調試界面,如下圖所示。

image.png

然後,依次點擊【Chrome菜單】→【選擇更多工具】→【選擇開發者工具】,或者使用快捷鍵【Command +Option +I】即可打開調試窗口,開始調試。

image.png 如果大家有前端開發的基礎,那麼React Native開發可以做到快速上手。

三、集成到原生應用

3.1 集成到原生Android應用

首先,在原生Android項目的根目錄下執行yarn init命令創建一個名為package.json的空文件。然後,根據提示輸入對應的配置信息。等待命令執行完成之後,會發現原生Android項目的根目錄多了一個package.json文件,該文件就是。 接着,使用如下命令添加React和React Native運行環境的支持腳本。

yarn add react react-native

執行完命令後,會發現Android項目的根目錄下多了一個node_modules文件夾,裏面包含了React Native開發也運行所需的依賴模塊,原則上這個文件目錄是不能複製、移動和修改的。並且,node_modules文件夾中的內容是不需要上傳倉庫的,所以還需要將node_modules文件目錄記錄到.gitignore文件中。 接下來,使用文本編輯器打開package.json文件,配置React Native的啟動腳本,如下代碼。

"scripts": { "start": "yarn react-native start", },

到此,React Native所需的環境就配置完成了。此時,package.json文件的全部內容如下所示。

{ "name": "AndroidDemo", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "react": "^17.0.1", "react-native": "^0.66.0" }, "scripts": { "start": "yarn react-native start" } }

然後,在Android項目的根目錄下創建一個index.js文件,用於作為React Native模塊的入口,代碼如下。

``` import React from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class HelloWorld extends React.Component { render() { return ( Hello, React Native ); } }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, });

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld); ```

接下來,我們使用Android Studio打開原生Android項目,並在app目錄的build.gradle文件的dependencies代碼塊中添加React Native和JSC引擎依賴,如下所示。

dependencies { ... implementation "com.facebook.react:react-native:+" implementation "org.webkit:android-jsc:+" }

如果不指定依賴的版本,那麼默認使用的是package.json文件中React Native對應的版本。然後,在項目的build.gradle文件的allprojects代碼塊中添加React Native和JSC引擎的路徑,如下所示。

allprojects { repositories { maven { url "$rootDir/../node_modules/react-native/android" } maven { url("$rootDir/../node_modules/jsc-android/dist") } ... } ... }

然後,打開AndroidManifest.xml清單文件,添加網絡權限代碼,如下所示。

<uses-permission android:name="android.permission.INTERNET" />

如果需要訪問開發者調試菜單,還需要在AndroidManifest.xml清單文件中註冊DevSettingsActivity界面,如下所示。

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

接下來,新建一個Activity作為React Native的容器頁面,並在Activity中創建一個ReactRootView對象,然後在這個對象之中啟動React Native應用代碼,如下所示。

``` public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SoLoader.init(this, false);
    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setCurrentActivity(this)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
    setContentView(mReactRootView);
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}

} ```

可以使用Android Studio的【Alt + Enter】快捷鍵自動導入缺失的語句,並且BuildConfig是編譯時自動生成的,無需額外引入。 由於React Native應用調試還需要懸浮窗權限,所以在需要在Android項目的代碼中添加懸浮窗權限邏輯,如下所示。

``` private final int OVERLAY_PERMISSION_REQ_CODE = 1;

private void requestPermission() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); } } }

@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { // SYSTEM_ALERT_WINDOW permission not granted } } } mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data ); } ```

接下來,我們在AndroidManifest.xml清單文件中註冊MyReactActivity,此處我們直接使用MyReactActivity替換MainActivity作為應用的主頁面,如下所示。

<activity android:name=".MyReactActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>

完成上述操作後,我們在src/main目錄下創建一個assets資源文件夾,然後執行如下打包命令。

react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false

接着,執行yarn start命令啟動React Native所需的服務,然後重新運行原生Android項目即可看到效果,如圖下圖所示。

image.png

3.2 集成到原生iOS應用

在原生iOS項目中集成React Native的步驟和Android是一樣的。首先,需要在原生iOS項目的根目錄下創建一個package.json文件,然後添加如下腳本代碼。

{ "name": "RNiOS", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "react": "^17.0.1", "react-native": "^0.66.0" }, "scripts": { "start": "yarn react-native start" } }

然後,執行yarn install命令安裝React Native需要的依賴包。接着,我們再新建一個index.js文件作為React Native部分的入口,代碼如下。

``` import React from 'react'; import {AppRegistry,StyleSheet,Text,View} from 'react-native';

class ReactHost extends React.Component { render() { return ( 2048 High Scores ) } } AppRegistry.registerComponent('MyReactNativeApp', () => ReactHost); ``` 然後,在iOS項目的根目錄下使用pod init命令創建一個Podfile文件,添加如下依賴包腳本。

```

target的名字一般與你的項目名字相

pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired" pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety" pod 'React', :path => '../node_modules/react-native/' pod 'React-Core', :path => '../node_modules/react-native/' pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules' pod 'React-Core/DevSupport', :path => '../node_modules/react-native/' pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon" pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon" pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end ```

需要説明的是,上面的腳本是啟動React Native部分所必須的,並且每個版本會有細微的區別。完成上述配置之後,使用pod install命令安裝所需的依賴包。 接着,使用Xcode打開原生iOS項目,在ViewController.m啟動文件中添加如下代碼。

``` - (IBAction)highScoreButtonPressed:(id)sender { NSLog(@"High Score Button Pressed"); NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

RCTRootView *rootView =
  [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                              moduleName: @"RNHighScores"
                       initialProperties:
                         @{
                           @"scores" : @[
                             @{
                               @"name" : @"Alex",
                               @"value": @"42"
                              },
                             @{
                               @"name" : @"Joel",
                               @"value": @"10"
                             }
                           ]
                         }
                           launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];

} ```

當上面的代碼被執行時,應用會打開React Native的index.js頁面,並且將從原生iOS部分獲取的數據也顯示到屏幕上。最後,使用yarn start命令啟動Node.js服務,重新運行原生iOS項目即可看到效果,如圖下圖所示。

image.png