工欲善其事，必先利其器。搭建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开发环境，如下图所示。

一起，为了便利后边项目中运用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的途径。

相同，为了便利在项目中运用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进行装置，

需求阐明的是，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项目，如下图所示。

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翻开对应的原生工程来检查报错信息。假如没有任何过错提示，那么运转作用如下图所示。

2.3 调试项目

调试是软件开发过程中重要的步骤，也是保证软件质量的重要手法。运用调试不仅能够帮助开发者快读的定位软件中存在的问题，一起也是初学者快速了解软件功用的重要途径。

因为React Native项目主要运用React前端言语进行开发，所以调试React Native需求运用到Chrome的DevTools，而Chrome浏览器默许就集成了这一东西。React Native集成了对Chrome的DevTools的支撑，开发者能够很容易地运用它调试React Native运用。

运用真机开发时，调试运用只需求晃动下设备即可翻开调试选项。假如开发运用的是模拟器，那么能够运用快捷键来翻开调试功用，Android模拟器调试的快捷键是【Command +M】，iOS模拟器的快捷键是【Command +D】，如下图所示。

需求阐明的是，假如是运用真机进行调试，需求调试的真机和开发程序的电脑处于同一个Wi-Fi网络，不然将会呈现无法衔接的情况。接着，只需求点击屏幕上的【Debug】选项即可开启远端调试功用。开启远端调试时，体系会主动翻开Chrome浏览器的调试界面，如下图所示。

然后，依次点击【Chrome菜单】→【选择更多东西】→【选择开发者东西】，或许运用快捷键【Command +Option +I】即可翻开调试窗口，开端调试。

假如咱们有前端开发的根底，那么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 (
            <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项目，并在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项目即可看到作用，如图下图所示。

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 (
      <View style={styles.container}>
        <Text style={styles.hello}>2048 High Scores</Text>
      </View>
    )
  }
}
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项目即可看到作用，如图下图所示。

最新版React Native环境搭建

一、根底环境

1.1 装置Node.js

1.2 增加Android原生环境

1.3 增加iOS原生环境

二、创立示例项目

2.1 创立项目

2.2 运转项目

2.3 调试项目

三、集成到原生运用

3.1 集成到原生Android运用

3.2 集成到原生iOS运用

作者信息

最新版React Native环境搭建

一、根底环境

1.1 装置Node.js

1.2 增加Android原生环境

1.3 增加iOS原生环境

二、创立示例项目

2.1 创立项目

2.2 运转项目

2.3 调试项目

三、集成到原生运用

3.1 集成到原生Android运用

3.2 集成到原生iOS运用

相关文章

谈谈 iOS 包瘦身方案

设计模式-02.工厂方法

如果写劣质代码是犯罪，那我该判无期

查漏补缺第十二期(网易实习三面)

作者信息