最新版React?Native環(huán)境搭建(親測)
工欲善其事，必先利其器。搭建React Native開發(fā)環(huán)境，需要安裝以下輔助工具。
- Node.js：React Native需要借助Node.js來創(chuàng)建和運(yùn)行JavaScript代碼。
- 原生開發(fā)工具及環(huán)境：React Native的運(yùn)行需要依賴原生Android和iOS環(huán)境，因此需要分別安裝原生Android和iOS的開發(fā)環(huán)境。
- 其他開發(fā)工具：代碼編輯器Visual Studio Code或WebStorm，遠(yuǎn)程調(diào)試具Chrome瀏覽器等。
一、基礎(chǔ)環(huán)境
1.1 安裝Node.js
首先，我們需要安裝Homebrew，Homebrew是一款Mac OS平臺下的軟件包管理工具，擁有安裝、卸載、更新、查看、搜索等很多實(shí)用的功能，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原生環(huán)境
由于React Native項(xiàng)目的編譯運(yùn)行需要依賴原生平臺，所以在搭建React Native開發(fā)環(huán)境過程中，需要事先搭建好原生Android和iOS的開發(fā)環(huán)境。
在搭建原生Android開發(fā)環(huán)境過程中，由于Android項(xiàng)目的開發(fā)和運(yùn)行需要依賴Java環(huán)境，如果還沒有安裝Java環(huán)境，可以從JDK官網(wǎng)下載操作系統(tǒng)對應(yīng)的JDK版本然后進(jìn)行安裝。安裝成功之后，可以使用java -version命令來驗(yàn)證Java開發(fā)環(huán)境，如下圖所示。
同時，為了方便后面項(xiàng)目中使用Java的命令行，還需要在.bash_profile文件中配置環(huán)境變量，如下所示。
# 如果你不是通過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開發(fā)工具Android Studio和Android開發(fā)套件Android SDK Tools。
首先，從Android官網(wǎng)下載最新的Android Studio，安裝完成之后，第一次啟動會自動下載Android SDK，下載Android SDK需要在Android Studio的設(shè)置板中配置Android SDK Tools的路徑。
同樣，為了方便在項(xiàng)目中使用Android命令行工具，還需要配置一下Android系統(tǒng)環(huán)境變量。
export ANDROID_HOME="/Users/xxx/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools1.3 添加iOS原生環(huán)境
眾所周知，開發(fā)iOS應(yīng)用需要macOS操作系統(tǒng)支持，所以如果經(jīng)濟(jì)條件允許最好準(zhǔn)備一臺Mac電腦。也只有這樣，才能使用React Native開發(fā)可以同時運(yùn)行在iOS和Android設(shè)備上的跨平臺應(yīng)用，發(fā)揮React Native跨平臺應(yīng)用開發(fā)的優(yōu)勢。
由于使用React Native開發(fā)iOS端的應(yīng)用時需要Xcode 7及更高版本的支持，如果本地還沒有安裝Xcode應(yīng)用程序，可以從App Store上下載最新的Xcode進(jìn)行安裝，
需要說明的是，Xcode安裝程序必須通過Apple官網(wǎng)或者App Store進(jìn)行下載，否則容易出現(xiàn)代碼植入和代碼泄漏的風(fēng)險。比如，2015年9月發(fā)生的XcodeGhost非法代碼植入事件，就是因?yàn)殚_發(fā)者使用的是非官方的Xcode安裝程序引起的。
同時，React Native項(xiàng)目的原生iOS部分使用的是CocoaPods來管理第三方依賴庫，所以在搭建iOS開發(fā)環(huán)境時還需要安裝CocoaPods庫管理工具。如果還沒有安裝CocoaPods，可以使用下面的命令進(jìn)行安裝。
brew install cocoapods
由于React Native項(xiàng)目的運(yùn)行需要依賴ruby的2.7.5版本，所以請確保本地已經(jīng)安裝了ruby依賴。如果本地安裝了多個ruby版本，那么可以使用下面的命令進(jìn)行切換。
rvm use ruby-2.7.5 --default
二、創(chuàng)建示例項(xiàng)目
2.1 創(chuàng)建項(xiàng)目
React Native支持使用命令和IDE集成開發(fā)工具兩種方式來創(chuàng)建項(xiàng)目。其中，使用命令行方式初始化React Native項(xiàng)目如下所示。
npx react-native init RNDemos
需要注意的是，初始化React Native項(xiàng)目時，項(xiàng)目名稱不能包含中文、空格和特殊符號，也不能使用JavaScript關(guān)鍵字作為項(xiàng)目名，如 class、native、new等。 同時，React Native在初始化項(xiàng)目時還支持指定版本和項(xiàng)目模板，如下所示。
//指定版本 npx react-native init AwesomeProject --version 0.66.0 //指定模版 npx react-native init AwesomeTSProject --template react-native-template-typescript
當(dāng)然，除了命令行方式外，我們更推薦使用VSCode或WebStrom等可視化編輯工具來創(chuàng)建React Native項(xiàng)目。
等待React Native項(xiàng)目構(gòu)建成功之后，系統(tǒng)還會自動安裝項(xiàng)目所需的第三方依賴庫。接著，再使用VSCode或WebStrom打開React Native項(xiàng)目，如下圖所示。
2.2 運(yùn)行項(xiàng)目
運(yùn)行React Native項(xiàng)目之前，需要配置好原生開發(fā)環(huán)境。即運(yùn)行iOS 需要正確安裝和配置Xcode工具，運(yùn)行Android App需要正確安裝和配置Android Studio和Android SDK Tools。 同時，為了能夠正常的運(yùn)行項(xiàng)目，還需要在項(xiàng)目運(yùn)行之前啟動模擬器或者真機(jī)設(shè)備。啟動模擬器或真機(jī)后，我們可以使用如下的命令來查看連接情況。
xcrun simctl list devices //查看可用的iOS設(shè)備 adb devices //查看可用的Android設(shè)備
然后，在項(xiàng)目的根目錄運(yùn)行執(zhí)行如下命令即可啟動React Native項(xiàng)目。
//啟動iOS yarn ios或者yarn react-native run-ios //啟動Android yarn android或者yarn react-native run- android
此命令會對項(xiàng)目的原生部分進(jìn)行編譯，同時在后臺啟動Metro服務(wù)對 JavaScript代碼進(jìn)行實(shí)時打包處理。當(dāng)然，Metro服務(wù)也可以使用yarn start命令單獨(dú)啟動。如果此命令無法正常運(yùn)行，可以使用Android Studio或者Xcode打開對應(yīng)的原生工程來查看報錯信息。如果沒有任何錯誤提示，那么運(yùn)行效果如下圖所示。
2.3 調(diào)試項(xiàng)目
調(diào)試是軟件開發(fā)過程中重要的步驟，也是保證軟件質(zhì)量的重要手段。應(yīng)用調(diào)試不僅可以幫助開發(fā)者快讀的定位軟件中存在的問題，同時也是初學(xué)者快速理解軟件功能的重要途徑。
由于React Native項(xiàng)目主要使用React前端語言進(jìn)行開發(fā)，所以調(diào)試React Native需要使用到Chrome的DevTools，而Chrome瀏覽器默認(rèn)就集成了這一工具。React Native集成了對Chrome的DevTools的支持，開發(fā)者可以很容易地使用它調(diào)試React Native應(yīng)用。
使用真機(jī)開發(fā)時，調(diào)試應(yīng)用只需要晃動下設(shè)備即可打開調(diào)試選項(xiàng)。如果開發(fā)使用的是模擬器，那么可以使用快捷鍵來打開調(diào)試功能，Android模擬器調(diào)試的快捷鍵是【Command +M】，iOS模擬器的快捷鍵是【Command +D】，如下圖所示。
需要說明的是，如果是使用真機(jī)進(jìn)行調(diào)試，需要調(diào)試的真機(jī)和開發(fā)程序的電腦處于同一個Wi-Fi網(wǎng)絡(luò)，否則將會出現(xiàn)無法連接的情況。 接著，只需要點(diǎn)擊屏幕上的【Debug】選項(xiàng)即可開啟遠(yuǎn)端調(diào)試功能。開啟遠(yuǎn)端調(diào)試時，系統(tǒng)會自動打開Chrome瀏覽器的調(diào)試界面，如下圖所示。
然后，依次點(diǎn)擊【Chrome菜單】→【選擇更多工具】→【選擇開發(fā)者工具】，或者使用快捷鍵【Command +Option +I】即可打開調(diào)試窗口，開始調(diào)試。
如果大家有前端開發(fā)的基礎(chǔ)，那么React Native開發(fā)可以做到快速上手。
三、集成到原生應(yīng)用
3.1 集成到原生Android應(yīng)用
首先，在原生Android項(xiàng)目的根目錄下執(zhí)行yarn init命令創(chuàng)建一個名為package.json的空文件。然后，根據(jù)提示輸入對應(yīng)的配置信息。等待命令執(zhí)行完成之后，會發(fā)現(xiàn)原生Android項(xiàng)目的根目錄多了一個package.json文件，該文件就是。 接著，使用如下命令添加React和React Native運(yùn)行環(huán)境的支持腳本。
yarn add react react-native
執(zhí)行完命令后，會發(fā)現(xiàn)Android項(xiàng)目的根目錄下多了一個node_modules文件夾，里面包含了React Native開發(fā)也運(yùn)行所需的依賴模塊，原則上這個文件目錄是不能復(fù)制、移動和修改的。并且，node_modules文件夾中的內(nèi)容是不需要上傳倉庫的，所以還需要將node_modules文件目錄記錄到.gitignore文件中。 接下來，使用文本編輯器打開package.json文件，配置React Native的啟動腳本，如下代碼。
"scripts": {
"start": "yarn react-native start",
},到此，React Native所需的環(huán)境就配置完成了。此時，package.json文件的全部內(nèi)容如下所示。
{
"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項(xiàng)目的根目錄下創(chuàng)建一個index.js文件，用于作為React Native模塊的入口，代碼如下。
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, React Native</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);接下來，我們使用Android Studio打開原生Android項(xiàng)目，并在app目錄的build.gradle文件的dependencies代碼塊中添加React Native和JSC引擎依賴，如下所示。
dependencies {
...
implementation "com.facebook.react:react-native:+"
implementation "org.webkit:android-jsc:+"
}如果不指定依賴的版本，那么默認(rèn)使用的是package.json文件中React Native對應(yīng)的版本。然后，在項(xiàng)目的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清單文件，添加網(wǎng)絡(luò)權(quán)限代碼，如下所示。
<uses-permission android:name="android.permission.INTERNET" />
如果需要訪問開發(fā)者調(diào)試菜單，還需要在AndroidManifest.xml清單文件中注冊DevSettingsActivity界面，如下所示。
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
接下來，新建一個Activity作為React Native的容器頁面，并在Activity中創(chuàng)建一個ReactRootView對象，然后在這個對象之中啟動React Native應(yīng)用代碼，如下所示。
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】快捷鍵自動導(dǎo)入缺失的語句，并且BuildConfig是編譯時自動生成的，無需額外引入。 由于React Native應(yīng)用調(diào)試還需要懸浮窗權(quán)限，所以在需要在Android項(xiàng)目的代碼中添加懸浮窗權(quán)限邏輯，如下所示。
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 );
}
復(fù)制代碼接下來，我們在AndroidManifest.xml清單文件中注冊MyReactActivity，此處我們直接使用MyReactActivity替換MainActivity作為應(yīng)用的主頁面，如下所示。
<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>
復(fù)制代碼完成上述操作后，我們在src/main目錄下創(chuàng)建一個assets資源文件夾，然后執(zhí)行如下打包命令。
react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false 復(fù)制代碼
接著，執(zhí)行yarn start命令啟動React Native所需的服務(wù)，然后重新運(yùn)行原生Android項(xiàng)目即可看到效果，如圖下圖所示。
3.2 集成到原生iOS應(yīng)用
在原生iOS項(xiàng)目中集成React Native的步驟和Android是一樣的。首先，需要在原生iOS項(xiàng)目的根目錄下創(chuàng)建一個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"
}
}然后，執(zhí)行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 (
<View style={styles.container}>
<Text style={styles.hello}>2048 High Scores</Text>
</View>
)
}
}
AppRegistry.registerComponent('MyReactNativeApp', () => ReactHost);然后，在iOS項(xiàng)目的根目錄下使用pod init命令創(chuàng)建一個Podfile文件，添加如下依賴包腳本。
# target的名字一般與你的項(xiàng)目名字相 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部分所必須的，并且每個版本會有細(xì)微的區(qū)別。完成上述配置之后，使用pod install命令安裝所需的依賴包。 接著，使用Xcode打開原生iOS項(xiàng)目，在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];
}當(dāng)上面的代碼被執(zhí)行時，應(yīng)用會打開React Native的index.js頁面，并且將從原生iOS部分獲取的數(shù)據(jù)也顯示到屏幕上。最后，使用yarn start命令啟動Node.js服務(wù)，重新運(yùn)行原生iOS項(xiàng)目即可看到效果，如圖下圖所示。
到此這篇關(guān)于最新版React Native環(huán)境搭建()的文章就介紹到這了,更多相關(guān)React Native環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?React?Native?中給第三方庫打補(bǔ)丁的過程解析
這篇文章主要介紹了在?React?Native?中給第三方庫打補(bǔ)丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結(jié)果的方法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了react?redux的原理以及基礎(chǔ)使用講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了React中classnames庫使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
React 提供了 refrefref 屬性，讓我們可以引用組件的實(shí)例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
React.memo為高階組件。它與React.PureComponent 非常相似，但它適用于函數(shù)組件，但不適用于class組件。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-10-10
這篇文章主要給大家介紹了關(guān)于React Native中Mobx的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家介紹了Modal.confirm是否違反了React模式分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React?state結(jié)構(gòu)設(shè)計原則示例詳解
這篇文章主要為大家介紹了React?state結(jié)構(gòu)設(shè)計原則示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本篇文章主要介紹了React-Native 組件之 Modal的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08