工欲善其事,必先利其器。搭建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】即可翻开调试窗口,开端调试。
三、集成到原生运用
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项目即可看到作用,如图下图所示。