# React-Native-Project **Repository Path**: zhao-jingtao-l/react-native-project ## Basic Information - **Project Name**: React-Native-Project - **Description**: 根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。必须安装的依赖有:Node、JDK 和 Android Studio。虽然你可以使用`任何编辑器`来开发应用,但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: https://gitee.com/zhao-jingtao-l - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-09-30 - **Last Updated**: 2024-03-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: React-native, TypeScript, React, Android, IOS ## README # 一、搭建开发环境 欢迎使用 React Native!这篇文档会帮助你搭建基本的 React Native 开发环境。 - 完整原生环境 - 简易沙盒环境 根据你所使用的操作系统、针对的目标平台不同,具体步骤有所不同。如果想同时开发 iOS 和 Android 也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同。 如果`阅读完本文档`后还碰到很多环境搭建的问题,我们建议你还可以再看看[求助讨论区](https://github.com/reactnativecn/react-native-website/issues)。注意!视频教程或者其他网络上的博客和文章可能和本文档有所出入,请以最新版本的本文档所述为准! - macOS - Windows - Linux #### 目标平台 - Android - iOS ## 安装依赖 必须安装的依赖有:Node、JDK 和 Android Studio。 虽然你可以使用`任何编辑器`来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 ### Node, JDK 我们建议直接使用搜索引擎搜索下载 Node 和[Java SE Development Kit (JDK)](https://www.oracle.com/java/technologies/downloads/#java11) 注意 Node 的版本应大于等于 16,安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。 > 注意:强烈建议始终选择 Node 当前的 LTS (长期维护)版本,一般是偶数版本,不要选择偏实验性质的奇数版本。 > 注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别! React Native 需要 Java Development Kit [JDK] 11。你可以在命令行中输入 `javac -version`(请注意是 javac,不是 java)来查看你当前安装的 JDK 版本。如果版本不合要求,则可以去[Temurin](https://adoptium.net/?variant=openjdk11&jvmVariant=hotspot)或[Oracle JDK](https://www.oracle.com/java/technologies/downloads/#java11)上下载(后者下载需注册登录)。 > 低于 0.67 版本的 React Native 需要 JDK 1.8 版本(官方也称 8 版本)。 ```jsx # 使用nrm工具切换淘宝源 npx nrm use taobao # 如果之后需要切换回官方源可使用 npx nrm use npm ``` ### Yarn [Yarn](http://yarnpkg.com/)是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。 ```jsx npm install -g yarn ``` 安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用`yarn`代替`npm install`命令,用`yarn add 某第三方库名`代替`npm install 某第三方库名`。 ### Android 开发环境 如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一过程相当繁琐。请`万分仔细`地阅读下面的说明,严格对照文档进行配置操作。 > 译注:请注意!!!国内用户`必须必须必须`有稳定的代理软件,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些代理软件可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常连接网络。 #### 1. 安装 Android Studio [首先下载和安装 Android Studio](https://developer.android.google.cn/studio/),国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项: - `Android SDK` - `Android SDK Platform` - `Android Virtual Device` 然后点击"Next"来安装选中的组件。 > 如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。 安装完成后,看到欢迎界面时,就可以进行下面的操作了。 #### 2. 安装 Android SDK Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是`Android 13 (Tiramisu)`版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android 5 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。 你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。 ![Android Studio Welcome](https://www.reactnative.cn/assets/images/GettingStartedAndroidStudioWelcomeWindows-b88d46e9a7fe5e050224a9a295148222.png) > SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是**Appearance & Behavior** → **System Settings** → **Android SDK**。 在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开`Android 13 (Tiramisu)`选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面): - `Android SDK Platform 33` - `Intel x86 Atom_64 System Image`(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件) 然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的`33.0.0`版本。你可以同时安装多个其他版本。 最后点击"Apply"来下载和安装这些组件。 #### 3. 配置 ANDROID_HOME 环境变量[](https://www.reactnative.cn/docs/environment-setup#3-配置-android_home-环境变量) React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。 打开`控制面板` -> `系统和安全` -> `系统` -> `高级系统设置` -> `高级` -> `环境变量` -> `新建`,创建一个名为`ANDROID_HOME`的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认): ![ANDROID_HOME Environment Variable](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAo0AAAClCAMAAAAOEzcNAAABwlBMVEVfosv///8AAADMzMz//7ZmAABmtv9mADqQ2///25A6ADq2ZgA6kNv/tmYAZrYFBwg6AGa2//9mAGY6AAA6kJCQ27b//9uQOgAAAGZmZjq2/7aQtpDbkDoAADoAOpDb//86OpDb/9uQOjoAOmZmOjrw8PB6enqrYAA2h87wq2AAYKvwzoc2ADaHzvDw8KtgADZgq/A6OmY6OgA6Ojo2AGCr8PBgAGAAZmbw8M6HNgBgYDYAAGCr8KuHq4c2AACHh2DOhzYANofO8PBgAADb/7Y2NofO8M6HNjYAADZmtrYANmBgNjaQOmYAeNczmf/MZgCg7v//7v9amf/B//9/mf+gq/9/3v//3v/hzv8zq//h//8zvP/BvP+gvP/h7v/B7v/h3v9azv/B3v+gzv9gNoc2NmBgNmClZgAAYGCtra3h4eHh4aBaAABaoOEzf8HhwX8zADN/weFaADPhoFrh4cF/MwAAWqAAM3/B4eEzAFqg4eEAADOgWgAzAAB/oOHBfzNaWjMAAFozWqBaoKAzMwB/MzN/f1ozMzMzM3+gWjN/oH/B4cFaAFpaM39/waB/M1qgwX9aWlozM1paMzMAM1q/v7+vTvonAAAKLUlEQVR4Aeyd17arNhBAo3EBAnZyesO39957r+n5/7/JDBouxrfiNLO89wNiNOPztJdG4jzouxUCIACsBtgI2AiAjYCNANgI/bYRABsBsBGwEUAGcRzIJ20cjkRkXL0lafZ9qi8e+GORvNDHZBpq/Dde7QPAJxn8MPDh0zYmLQHt+SUbXcR8HFpgYwfQ0R7/jI3ZjxthuLmBjcuCjibjF23MtmQ7SYfJzkhkOmfj7p7I2LL7G8PkYF8l3N0b2/qYW51NHWqlB0dbUtiPYn34JICOLuOn941m2mgcylmqJi2sjZNazUkxHBXBKIvYqK14FO3z4Nhx3UTqW6wP3QBsdJmyE8ft7WMbs62iWjhFpp7R2pOn1DaRyl4ragL1VIdYH7oCdOpP27irwlVbxFDKWEevjKmjE8d1SkvcxibQNh7jALDsKabdqY382PGQT4NSeo/2jPlZhEndlW3ag1Fh/noDB1jiC89IxOwS2Y4q5rHH2vFFhZzYrtJatXdqQ82z9OkztY11cCAy9lNMl04NfP0G4D+DAGtgI2AjADYCNgJgI2AjADYCNgJgI2DjWYDVABsBGwGwEbARABsBGwGwEbARABsBGwGwEbARABsBGwGwEQAbARsBsBGwEQAbARsB/jkbAbDxHKwpK2ljgLUEG/8+gI2AjdgI2AjYeP6CPi5e+hBfvnI1vly7ftWHf9PGeGfXcOQXbPp9Ss097hOPNzc8tXCDsVf4n1DKWeo/hr7Z6CKev9Gu+e9szG6eSU2rW+Noo/plXtk42d8Ik5ld3VWYjZ5asLGpSG5XUyO/grOPYOPlO3fPXrt39/+ysSzKwrTSyzRrG/3CQgvtPuwYq42eamxsVyQHha2l95P+2oiNDx7esPXxvMglNe/R4ydqnwdPn8mFysbLz+Tx3crM56JTc/kbL2wiFlx8+aqrjXbdaxY9zIvaRr/M1S7XjPJpkdtoqbaNTUWys7mhLzt9tREbjRcXYqNW7a69jvZ58PKVbiLtTacuXrDZ15fOXjQv6/xFuWATsWAZG1VFNck9nLdxJDKt0iHGizaOxJilTYUKPdYfvImbT+3yPQQbL799915lEvnJtDPPmkA91UFXPhHbXrbzHswXdLbR2nTp28RpbaP66atea2301GfXRjMzH/sf6SfY+OD907evdPf44H0tWBNoG49xLP0o30wstW/0JW5/I162/nNr32imdto3ptVV7v21ERuNF9ZurSvXgnmgbVs18wZe0co3NnpB905tW0Nvs2ba1szP1GPzrD5Xa+xn6phqbGxX2LvY2GcbsVHN0kVQfvm1FqwOHonc8FNMq1O3ipuCJWzMC3uW1qObT4Wz1G0r443tMg5mo6cWbfxQYcvrbxtzHy2hA/wvpucANg5HwokZG1kb1xpsBGzERsBGwEZsBGxcT2AlbQTARsBGAGwEbATARsBGgH/PRgBsBGwEwMbf1xRYSRvDWgLYCN8ANv6xjvwZ+gM2YiM2YiM2YuNf7JzNrtsgEIXF81Tqri/QVVcWdhyDAze37v/7P0HnZBgfW02EarE0qgLM+RhS+YiJ7wLvXD9Ifxk7fF7140kjUG0Ko03hiSYbx//MD+FVzv2a+YYZ+SS7jYaBPN3Y/m5bxBu4cb5leYBveMa54kYClUa4m+/ve95SXAJn9fwqvMgJ6TU/30b8/+jG042t7rZt70af1zPla8WNBCqNcLfEJT51I0zCWT0/hBc5Ib3mUz8wouTpxiZ327Z3o5kCz8xf6UbU7yyWQZG7fHMjpgV4u6HMIjg5FzSQF4cgeHE3Yfmc70NZxA6Szx3Wo2wHHfELWCZNpSqEfc7vtmcUCd9HFwEsQU0oEDH5F043NrnbFihuIoOMOKRVlvgBN96H1Y0p0o0pdDpJEY9Tpwr0Q3IjgkpoQBAEYeDrBpb0sAQYEawzN/K40hG/QMnUeUTI7XMG23NxokZbBFCDynceFjXs6vN5Nra52xauJavxVT7mRiuYaO/D6sb5Vo46FxDClIB5KImMkQUfyaa8gVFSlwANwraDobheR/wClgkd9/k356Uck1BtEYPKI1tesXs8K3Wju21R0T/++Gyy4pSP/27ka4S333SLMzPgsWKqAN0I2T9x4xZ2aCN07MQOi7leR8y/dyO5fc66GzFDWwLdGE43NrrbFueonKSrTPzwW0xyj3dqqdT6GjHJQP+CsqBGmxsxVYBuTFZ3GcywBGFkVf9FCKVTOnN9GTF/Z5lQqcntc3JPLcG2iEHlpfOR2BRPN7a42xbtw89fn8g+fnJ+KfKhSq3luB/KM8aTw1T/SAdNK7VOAdCNQPv3nRvBb+Ep6smEdwy43joHzNZPLuhI80OMJdMDzdxnm9P2TM5eT3QRg0wYug3m+9+nG5vcbSuYdGSlZP8x+aAbty1FjtnqQBXmm8pf9u3YBmAYBIDghBnETvavMwAFTRDEuqtdIPEdclQ3QHzvFuMyGGvsokY1qjGnxhxqVCNqRI1qRI3t8GcQ8hpBjagR1AhqRI2gRtQIakSNoEbUCGpEjaBG1Li6TRrlX64SxetIaty91qxR1Fi7jnNrVOP+nBrVGKlRjdOpUY1qVKMa1Xg/L3vmoSM5CINhicdlAtks9RLmtvdeHviMibcXVuftSJP2U2Lxf+M4ihBCVUyLHbWU/crwMTS+MTKIa7E6NBpNsSmvhXWeiUbrhAjxeQdWByYaYaL+z1jhOXRcdL4iGAYa3xoZnTQazZQp1LgWSTPlxn6pYPf3Y2iErdJzoONDaayOrNFISUxJtAnWYs2zPKlpUik/hkbj4bC+MfbL/GhMCsV+07p8CeLGWDpiXHCkzqDnPludEF6WwdA0bUPsJkQOGqsjwz38SPydNFK6sDuwFrshMtF4k4NSNhpmxlrgjgl8NHYCpoODhk3lqhAIMHtarmnjiQn9gMZOz7p11FQGY1MelxRL3VgRGRWYhUYSfy2N+1EWmzpAhYvG/Ruu0X2wYWO8td5oztyIFFGRlhTc++Bw/2hn6JdaYsoT/obGHbK86DhE3hmMYB6Pi5PIUzfWRka58UZsufFwZeDOjUaICQ2BLYtkAiuNJeOR53bn9OTo7Dz/H9aEQvFu3Ug0ov4kjXJNr2meurE+MqKRRNnqRkhgvHUjTGt3HtCIe/bcSA9bmH0tPw0vkKc1vehmsKjHTGPRb9I1DS7MXl5hwOX3PzRWR0Y0FvHm3r/wnRoQpEpqLUQWGqUR+E5tQpwNgQ2tnzFgrRsnnB7TLpxmBHAzWLeBKPxtR6Kx6KgqmcpbDM0jk5cMNNZGdpfGIv5iGvPaCDUvSgqRg8ZidojWiesronG2ntb7C3+LSap9i2nfYr4Ijf1+bDQ2Gr8EjdZNQ/tO/a+dO7YBAISBGMj+/e/LEki4uJvBShqCGr2aUKMa1ahGNapRjWp8x5XWby5YXbCCvyZAjagR1EjfpkbUCDY1UZvZiBpJs6kxGM1G1Ag2NXkHOi61IHl9uT0p7gAAAABJRU5ErkJggg==) SDK 默认是安装在下面的目录: ```powershell C:\Users\你的用户名\AppData\Local\Android\Sdk ``` 你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是**Appearance & Behavior** → **System Settings** → **Android SDK**。 你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。 #### 4. 把一些工具目录添加到环境变量 Path[](https://www.reactnative.cn/docs/environment-setup#4-把一些工具目录添加到环境变量-path) 打开`控制面板` -> `系统和安全` -> `系统` -> `高级系统设置` -> `高级` -> `环境变量`,选中**Path**变量,然后点击**编辑**。点击**新建**然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin ```powershell %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin ``` ## 创建新项目 > 如果你之前全局安装过旧的`react-native-cli`命令行工具,请使用`npm uninstall -g react-native-cli`卸载掉它以避免一些冲突: > > ```shell > npm uninstall -g react-native-cli @react-native-community/cli > ``` 使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的`npx`命令来使用: > **必须要看的注意事项一**:请`不要`在目录、文件名中使用`中文、空格`等特殊符号。请`不要`单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请`不要`使用与核心模块同名的项目名(如 react, react-native 等)。 > **必须要看的注意事项二**:请`不要`在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行! > **必须要看的注意事项三**:请`不要`使用一些移植的终端环境,例如`git bash`或`mingw`等等,这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行(CMD 或 powershell)运行。 ```shell npx react-native@latest init AwesomeProject ``` 如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考[集成到现有原生应用](https://www.reactnative.cn/docs/integration-with-existing-apps)。 ### 指定版本或项目模板 你可以使用`--version`参数(注意是`两`个杠)创建指定版本的项目。注意版本号必须精确到两个小数点。 ```shell npx react-native@X.XX.X init AwesomeProject --version X.XX.X ``` 还可以使用`--template`来使用一些社区提供的模板。 ## 准备 Android 设备 你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。后面我们所有的文档除非特别说明,并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器。此外还有很多第三方提供的模拟器如[Genymotion](https://www.genymotion.com/download)、BlueStack 等。一般来说官方模拟器免费、功能完整,但性能较差。第三方模拟器性能较好,但可能需要付费,或带有广告。 ### 使用 Android 真机 你也可以使用 Android 真机来代替模拟器进行开发,只需用 usb 数据线连接到电脑,然后遵照[在设备上运行](https://www.reactnative.cn/docs/running-on-device)这篇文档的说明操作即可。 ### 使用 Android 模拟器 你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样: ![Android Studio AVD Manager](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAIAAABCYLJOAAACLUlEQVR4Ab2Vw6IfPxiG3zfJHPPP2rbdfW3rProsLqCr7rqsbVur2raPPb+Z5Du2+YyRJ87HtLQ0dAIKnYNBQ5BEI4hI271BEIjUNZAgqbUm2WovyRLpyVMnfd83xggq3ATDMHTOzZo1q3ev3iRbXV4RKZEuXLBQayPOAQSESjlnDx85nJ+fjwpa7zUlaHPj2CO/oLTUNnTR8Wb2kvGeZ9rVbwJxTuArm69haAMaqtJXgnZ5y1tVmxKsMoqgKS0p2z1+WdEgItWXjp4XJEiCHesVZ50LnbUOrcE0LQURk2BsYHU0ASmnuqUgrfaSEAcvWs9eMQbKGe0J0L17j8TERJICW+hnx0Ylk6o17SAVF6U1lL3/bld+UbrAzpgx9f///4sEeT/TH955srMwkk2wNeUlROCsiBNCicu7dH+zH5BUgChapThh0NrYqCRpbTsoxZiEKBu60EbSsr+m5Z7RaoiIJQkQkv3lz8De/8/0tJEWekmKdSXb9MUjRYK7L3bk+996/7PpT/Zr6yIko0xcSsK0r2n33/+4NLjnXNIA0nz7kizy/b379ly6ckGIb+kPUhP7zZu5zTN/B/ZzaL+lxPecN2O7YsKbL2edOLLF5f3/v/+zsrOSk1MAxEb1z8j5dezaVggTYiYDyCnIP359q4gENl4EDdJwfLPWAiCplAptABEHp2oMKSfljzTaa0W/GVPxXkQ8EwWw5gCs+VhCK7w1/25o0ZHOj8dd7C0GRnwgNA5r8rwAAAAASUVORK5CYII=) 如果你刚刚才安装 Android Studio,那么可能需要先[创建一个虚拟设备](https://developer.android.com/studio/run/managing-avds.html)。点击"Create Virtual Device...",然后选择所需的设备类型并点击"Next",然后选择**Tiramisu** API Level 33 image. > 译注:请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。 ## 编译并运行 React Native 应用 确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行`yarn android`或者`yarn react-native run-android`: ```jsx cd AwesomeProject yarn android # 或者 yarn react-native run-android ``` 此命令会对项目的原生部分进行编译,同时在另外一个命令行中启动`Metro`服务对 js 代码进行实时打包处理(类似 webpack)。`Metro`服务也可以使用`yarn start`命令单独启动。 如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程`严重依赖稳定的代理软件`,否则将频繁遭遇链接超时和断开,导致无法运行。 也可以尝试阿里云提供的[maven 镜像](https://help.aliyun.com/document_detail/102512.html?spm=a2c40.aliyun_maven_repo.0.0.361865e90r2x4b),将`android/build.gradle`中的`mavenCentral()`和`google()`分别替换为`maven { url 'https://maven.aliyun.com/repository/central' }`和`maven { url 'https://maven.aliyun.com/repository/google' }`(注意可能有多处需要替换)。 `npx react-native run-android`只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。 > 译注:建议在`run-android`成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。 > 如果你无法正常运行,遇到奇奇怪怪的红屏错误,先回头`仔细对照文档检查`,然后可以看看[问题讨论区](https://github.com/reactnativecn/react-native-website/issues)。不同时期不同版本可能会碰到不同的问题,我们会在论坛中及时解答更新。但请注意***千万不要\***执行 bundle 命令,那样会导致代码完全无法刷新。 ### 修改项目 现在你已经成功运行了项目,我们可以开始尝试动手改一改了: - 使用你喜欢的文本编辑器打开`App.js`并随便改上几行 - 按两下 R 键,或是在开发者菜单中选择 *Reload*,就可以看到你的最新修改。 ### 完成了! 恭喜!你已经成功运行并修改了你的第一个 React Native 应用 ![img](https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/docs/assets/GettingStartedCongratulations.png) ## 接下来? 如果你想把 React Native 集成到现有的原生项目中,则请参考[集成到现有原生应用](https://www.reactnative.cn/docs/integration-with-existing-apps)。 如果你想从头开始学习 React Native 开发,可以从[简介](https://www.reactnative.cn/docs/environment-setup)文档开始。 # 二、集成到现有原生应用 如果你正准备从头开始制作一个新的应用,那么 React Native 会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程,React Native 也同样不在话下。只需简单几步,你就可以给原有应用加上新的基于 React Native 的特性、画面和视图等。 具体的步骤根据你所开发的目标平台不同而不同。 > 译注:本文档可能更新不够及时,不能保证适用于最新版本,欢迎了解的朋友使用页面底部的编辑链接帮忙改进此文档。一个实用的建议是可以使用`npx react-native init NewProject`创建一个最新版本的纯 RN 项目,去参考其 Podfile 或是 gradle 等的配置,以它们为准。 - Android (Java) - iOS (Objective-C) - iOS (Swift) ## 核心概念 把 React Native 组件集成到 Android 应用中有如下几个主要步骤: 1. 配置好 React Native 依赖和项目结构。 2. 创建 js 文件,编写 React Native 组件的 js 代码。 3. 在应用中添加一个`ReactRootView`。这个`ReactRootView`正是用来承载你的 React Native 组件的容器。 4. 启动 React Native 的 Metro 服务,运行应用。 5. 验证这部分组件是否正常工作。 ## 开发环境准备 首先按照[开发环境搭建教程](https://www.reactnative.cn/docs/environment-setup)来安装 React Native 在 Android 平台上所需的一切依赖软件。 ### 1. 配置项目目录结构 首先创建一个空目录用于存放 React Native 项目,然后在其中创建一个`/android`子目录,把你现有的 Android 项目拷贝到`/android`子目录中。 ### 2. 安装 JavaScript 依赖包 在项目根目录下创建一个名为`package.json`的空文本文件,然后填入以下内容: ```jsx { "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "react-native start" } } ``` > 示例中的`version`字段没有太大意义(除非你要把你的项目发布到 npm 仓库)。`scripts`中是用于启动 Metro 服务的命令。 接下来我们使用 yarn 或 npm(两者都是 node 的包管理器)来安装 React 和 React Native 模块。请打开一个终端/命令提示行,进入到项目目录中(即包含有 package.json 文件的目录),然后运行下列命令来安装: ```shell $ yarn add react-native ``` 这样默认会安装最新版本的 React Native,同时会打印出类似下面的警告信息(你可能需要滚动屏幕才能注意到): > warning "[react-native@0.52.2](mailto:react-native@0.52.2)" has unmet peer dependency "[react@16.2.0](mailto:react@16.2.0)". 这是正常现象,意味着我们还需要安装指定版本的 React: ```jsx $ yarn add react@16.2.0 ``` 注意必须严格匹配警告信息中所列出的版本,高了或者低了都不可以。 > 如果你使用多个第三方依赖,可能这些第三方各自要求的 react 版本有所冲突,此时应优先满足`react-native`所需要的`react`版本。其他第三方能用则用,不能用则只能考虑选择其他库。 所有 JavaScript 依赖模块都会被安装到项目根目录下的`node_modules/`目录中(这个目录我们原则上不复制、不移动、不修改、不上传,随用随装)。 把`node_modules/`目录记录到`.gitignore`文件中(即不上传到版本控制系统,只保留在本地)。 ## 把 React Native 添加到你的应用中eact-native-添加到你的应用中) ### 配置 Gradle React Native 使用 React Native Gradle Plugin 来配置您的依赖项和项目设置。 首先,让我们通过添加以下行来编辑您的`settings.gradle`文件: ```groovy includeBuild('../node_modules/@react-native/gradle-plugin') ``` 然后你需要打开顶层的 `build.gradle` 文件并添加这一行: ```diff buildscript { repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle:7.3.1") + classpath("com.facebook.react:react-native-gradle-plugin") } } ``` 这将确保 React Native Gradle Plugin 在您的项目中可用。 最后,在 `app/build.gradle` 文件中添加以下行(注意它的路径不同于上面,是`app/build.gradle`): ```diff apply plugin: "com.android.application" +apply plugin: "com.facebook.react" repositories { mavenCentral() } dependencies { // Other dependencies here + implementation "com.facebook.react:react-android" + implementation "com.facebook.react:hermes-android" } ``` 这些依赖项可在 `mavenCentral()` 上获得,因此请确保您已在 `repositories{}` 块中定义它。 提示 我们故意不为这些`implementation`依赖项指定版本,因为 React Native Gradle Plugin 会自动处理它。如果您不使用 React Native Gradle Plugin,则必须手动指定版本。 ### 启用原生模块的自动链接 要使用[自动链接](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)的功能,我们必须将其应用于几个地方。首先,将以下内容添加到`settings.gradle`: ```gradle apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) ``` 接下来,在`app/build.gradle`的最底部添加以下内容: ```gradle apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) ``` ### 配置权限 接着,在 `AndroidManifest.xml` 清单文件中声明网络权限: ```xml ``` 如果需要访问 `DevSettingsActivity` 界面(即开发者菜单),则还需要在 `AndroidManifest.xml` 中声明: ```xml ``` 开发者菜单一般仅用于在开发时从 Packager 服务器刷新 JavaScript 代码,所以在正式发布时你可以去掉这一权限。 ### 允许明文传输(http 接口) (API level 28+) > 从 Android 9 (API level 28)开始,默认情况下明文传输(http 接口)是禁用的,只能访问 https 接口。这将阻止应用程序连接到[Metro bundler](https://facebook.github.io/metro)。下面的更改允许调试版本中的明文通信。 #### 1. 为 debug 版本启用 `usesCleartextTraffic`选项 在`src/debug/AndroidManifest.xml`中添加`usesCleartextTraffic`选项: ```xml ``` 如果希望在正式打包后也能继续访问 http 接口,则需要在`src/main/AndroidManifest.xml`中也添加这一选项。 要了解有关网络安全配置和明文通信策略的更多信息,请参阅[此链接](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted)。 ### 代码集成 现在我们将修改原生 Android 应用程序以集成 React Native。 #### React Native 组件 我们首先要写的是"High Score"(得分排行榜)的 JavaScript 端的代码。 ##### 1. 创建一个`index.js`文件 首先在项目根目录中创建一个空的`index.js`文件。(注意一些老的教程可能提到,在 0.49 版本之前是 index.android.js 文件) `index.js`是 React Native 应用在 Android 上的入口文件。而且它是不可或缺的!它可以是个很简单的文件,简单到可以只包含一行`require/import`导入语句。本教程中为了简单示范,把全部的代码都写到了`index.js`里(当然实际开发中我们并不推荐这样做)。 ##### 2. 添加你自己的 React Native 代码 在`index.js`中添加你自己的组件。这里我们只是简单的添加一个``组件,然后用一个带有样式的``组件把它包起来。 ```jsx import React from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; const HelloWorld = () => { return ( Hello, World ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent( 'MyReactNativeApp', () => HelloWorld, ); ``` ##### 3. 配置权限以便开发中的红屏错误能正确显示 如果你的应用会运行在 Android 6.0(API level 23)或更高版本,请确保你在开发版本中有打开`悬浮窗(overlay)`权限。你可以在代码中使用`Settings.canDrawOverlays(this);`来检查。之所以需要这一权限,是因为我们会把开发中的报错显示在悬浮窗中(仅在开发阶段需要)。在 Android 6.0(API level 23)中用户需要手动同意授权。具体请求授权的做法是在`onCreate()`中添加如下代码。其中`OVERLAY_PERMISSION_REQ_CODE`是用于回传授权结果的字段。 ```java private final int OVERLAY_PERMISSION_REQ_CODE = 1; // 任写一个值 ... 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); } } ``` 最后,必须重写`onActivityResult()`方法(如下面的代码所示)来处理权限接受或拒绝情况以实现一致的用户体验。此外,为了集成使用 startActivityForResult 的原生模块,我们需要将结果传递给 ReactInstanceManager 实例的 onActivityResult 方法。 ```java @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 ); } ``` #### 核心组件:`ReactRootView` 我们还需要添加一些原生代码来启动 React Native 的运行时环境并让它开始渲染。首先需要在一个`Activity`中创建一个`ReactRootView`对象,然后在这个对象之中启动 React Native 应用,并将它设为界面的主视图。 > 如果你要在安卓 5.0 以下的系统上运行,请用 `com.android.support:appcompat` 包中的 `AppCompatActivity` 代替 `Activity` 。 ```java public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); SoLoader.init(this, false); mReactRootView = new ReactRootView(this); List packages = new PackageList(getApplication()).getPackages(); // 有一些第三方可能不能自动链接,对于这些包我们可以用下面的方式手动添加进来: // packages.add(new MyReactNativePackage()); // 同时需要手动把他们添加到`settings.gradle`和 `app/build.gradle`配置文件中。 mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setCurrentActivity(this) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackages(packages) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // 注意这里的MyReactNativeApp 必须对应"index.js"中的 // "AppRegistry.registerComponent()"的第一个参数 mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } } ``` 执行"Sync Project files with Gradle"操作。 如果你使用的是 Android Studio , 可以使用`Alt + Enter`快捷键来自动为 MyReactActivity 类补上缺失的 import 语句。注意`BuildConfig`应该是在你自己的包中自动生成,无需额外引入。千万不要从`com.facebook...`的包中引入! 我们需要把 `MyReactActivity` 的主题设定为 `Theme.AppCompat.Light.NoActionBar` ,因为里面有许多组件都使用了这一主题。 ```xml ``` > 一个`ReactInstanceManager`可以在多个 activities 或 fragments 间共享。你将需要创建自己的`ReactFragment`或`ReactActivity`,并拥有一个保存`ReactInstanceManager`的单例持有者。当你需要`ReactInstanceManager`(例如,将`ReactInstanceManager`连接到这些 Activities 或 Fragments 的生命周期)时,请使用单例提供的那个。 下一步我们需要把一些 activity 的生命周期回调传递给`ReactInstanceManager`: ```java @Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(this); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(this); } if (mReactRootView != null) { mReactRootView.unmountReactApplication(); } } ``` 我们还需要把后退按钮事件传递给 React Native: ```java @Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } ``` 这允许 JavaScript 控制用户按下设备后退按钮时发生的情况(例如,执行导航时)。当 JavaScript 不处理后退按钮按下的情况时,将调用`invokeDefaultOnBackPressed`方法。默认情况下,这将完成你的`Activity`。 最后,我们需要连接开发菜单。默认情况下通过(狂)摇晃设备来激活,但这在模拟器中不是很有用,只有当你按下设备菜单按钮时才显示(如果你使用的是 Android Studio 模拟器,请使用`Ctrl + M`): ```java @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); } ``` 现在 activity 已就绪,可以运行一些 JavaScript 代码了。 ### 测试集成结果 你已经完成了将 React Native 与当前应用程序集成的所有基本步骤。现在我们将启动[Metro bundler](https://facebook.github.io/metro)来构建`index.bundle`包,并通过本地主机提供服务。 ##### 1. 运行 Metro 服务 运行应用首先需要启动开发服务器(Metro)。你只需在项目根目录中执行以下命令即可: ```shell $ yarn start ``` ##### 2. 运行你的应用 保持 Metro 的窗口运行不要关闭,然后像往常一样编译运行你的 Android 应用(在命令行中执行`./gradlew installDebug`或是在 Android Studio 中编译运行)。 编译执行一切顺利进行之后,在进入到 MyReactActivity 时应该就能立刻从 Metro 中读取 JavaScript 代码并执行和显示: ![Screenshot](data:image/png;base64,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) ### 在 Android Studio 中打包 你也可以使用 Android Studio 来打 release 包!其步骤基本和原生应用一样,只是如果你**没有**使用 React Native Gradle Plugin 的话,则在每次编译打包之前需要先执行 js 文件的打包(即生成离线的 jsbundle 文件)。具体的 js 打包命令如下: ```shell # 注:如果你使用了 React Native Gradle Plugin,则其会自动执行以下命令,不需要手动执行 $ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/ ``` > 注意把上述命令中的路径替换为你实际项目的路径。如果 assets 目录不存在,则需要提前自己创建一个。 然后在 Android Studio 中正常生成 release 版本即可! # 三、运行命令(连接手机) ```bash adb reverse tcp:8081 tcp:8081 ``` ## 安装apk包 ```bash yarn android ``` ## 运行 ```bash yarn start ``` ## 打包(包的位置===>android-app-build-outputs-apk-release-app-release.apk) ```bash cd android gradlew assembleRelease ``` ## 错误记录 ### 1 pod install git 报错 ``` Pre-downloading: `boost-for-react-native` from `git@e.coding.net:theling/theling-utils/boost-for-react-native.git` [!] Error installing boost-for-react-native [!] Failed to download 'boost-for-react-native': [!] /usr/bin/git -C /var/folders/rp/g5qct2rs6wj7n5ps6nyvgzw40000gn/T/d20210708-37324-5z9v55 rev-parse HEAD HEAD fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree. Use '--' to separate paths from revisions, like this: 'git [...] -- [...]' ``` 解决方案: 先移除掉本地的 master,在终端输入 pod repo remove master 然后转到路径下,在终端输入 cd ~/.cocoapods/repos ### 2.iOS 错误 library not found for -lXXX ```angular2html 查看此链接解决 https://cloud.tencent.com/developer/article/1143340 ``` ### 3.打包步骤 ```angular2html 1.运行build-ios pod cache clean --all ``` # FlatList 使用文档 ## 使用场景 - 所有列表页皆可使用(减少 scrollView 的使用,ScrollView 是 FlatList 的子集) ## 重点属性 ### key flatList 跟手动 map 一样,要给子项加 Key,但是不用加载 renderItem 里,给 FlatList 组件加个属 性**keyExtractor**,格式如下: ```javascript keyExtractor={(item) => item.id} ``` ### ListEmptyComponent ```js { loadData(true); }} /> } ListEmptyComponent={} keyExtractor={(item) => item.policyId} contentContainerStyle={{ paddingHorizontal: 10 }} onEndReached={() => loadData()} onEndReachedThreshold={0.1} data={dataList.records} renderItem={renderItem} /> ``` renderItem 这个属性是个(item)=>你想要 render 的东西,**当你的 data 数组为空时,代码不会经过 renderItem**,所以也就不能在 renderItem 里判断空值并且设置 Empty 组件,当然你可以这么写 ```js { xxx.length > 0 ? ( } keyExtractor={(item) => item.policyId} contentContainerStyle={{ paddingHorizontal: 10 }} onEndReached={() => loadData()} onEndReachedThreshold={0.1} refreshControl={ { loadData(true); }} /> } data={dataList.records} renderItem={renderItem} /> ) : ( ); } ``` 但是不优雅,所以有个属性叫 ListEmptyComponent,字面意思,字面用法: ```js ListEmptyComponent={} 或 ListEmptyComponent={()=>} ``` ### 刷新属性 #### onEndReached #### onEndReachedThreshold #### refreshControl 这三个属性是处理列表刷新翻页的,具体看官方文档, ### ListHeaderComponent 正常情况下 一个列表页 包括 列表本身 翻页相关 搜索筛选相关列表本身和翻页已经了解了,搜索下拉,直觉上会 这么写 ```js <筛选组件XXX> ``` 这么写肯定会包黄色警告,因为 FlatList 不能嵌套在**_同属性的_**ScrollView 里所以最外层得改成 View. 也 可以用到这个属性 ListHeaderComponent,把上半部分的东西写在 FlatList 里 ```js <筛选组件XXX> } xxx={xxx} xxx={xxx} xxx={xxx} > ``` # 四、初始化项目 进入到自己的工作目录,执行下面的命令创建 react native 项目 ```bash npx react-native init AwesomeProject ``` 如果 出现如下报错: ```bash cli.init is not a function ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/93198039ea2643489519715d47b9ea27.png) 产生这个问题的原因是:使用这种方式创建工程,在[react-native](https://so.csdn.net/so/search?q=react-native&spm=1001.2101.3001.7020) 版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。 为了解决这个错误,我们要做的就是降级我们最新的 0.69 版本的 react native。要使用较旧的项目降级我们的项目,您必须执行以下命令。 可以将之前输入的命令改成: ```bash npx react-native init AwesomeProject --version 0.68.2 ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/99e42f204dee472e8de451c971f9372f.png) 看到如上图片,代表初始化成功。 # 五、使用 TypeScript ## 使用 TypeScript 开始新项目 如果您要开始一个新项目,则有几种不同的上手方法。 您可以使用[TypeScript 模板](https://github.com/react-native-community/react-native-template-typescript): ```sh npx react-native init MyApp --template react-native-template-typescript ``` > **Note** 如果以上命令失败,则可能是您的 PC 上全局安装了旧版本的`react-native`或`react-native-cli`。 尝试卸载 cli 并使用`npx`运行 cli. 您可以使用具有两个 TypeScript 模板的[Expo](https://expo.io/): ```sh npm install -g expo-cli expo init MyTSProject ``` 或者,您可以使用[Ignite](https://infinite.red/ignite),它也具有 TypeScript 模板: ```sh npm install -g ignite-cli ignite new MyTSProject ``` ## 在已有的项目中添加 TypeScript 1. 将 TypeScript 以及 React Native 和 Jest 的依赖添加到您的项目中。 ```sh yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer # or for npm npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer ``` 添加一个 TypeScript 配置文件。在项目的根目录中创建一个`tsconfig.json`: ```json { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react-native", "lib": ["es2017"], "types": ["react-native", "jest"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] } ``` 1. 创建一个`jest.config.js`文件来配置 Jest 以使用 TypeScript: ```js module.exports = { preset: 'react-native', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'] }; ``` 1. 将 JavaScript 文件重命名为`* .tsx`: > 请保留`./index.js`入口文件,否则将在打包生产版本时遇到问题。 1. 运行 `yarn tsc` 对 TypeScript 文件进行类型检查。 ## TypeScript 和 React Native 是如何工作的 无需额外配置,和非 TypeScript 的 React Native 项目一样都是直接通过 [Babel 体系](https://reactnative.cn/docs/javascript-environment#javascript-syntax-transformers) 将您的文件转换为 JavaScript。我们建议您只使用 TypeScript 编译器的类型检查功能(而不是编译)。如果您有已经存在的 TypeScript 代码需要迁移到 React Native,这里有一些关于使用 Babel 而不是 TypeScript 编译器的[注意事项](https://babeljs.io/docs/en/next/babel-plugin-transform-typescript)。 ## 用 TypeScript 写 React Native 的示例 可以用`interface`来为 React 的函数组件编写[Props](https://reactnative.cn/docs/props)的类型(使用`React.FC`)。这样在后续编码的过程中,编辑器就会根据这一类型来做类型检查并提供自动补全。 ```tsx // components/Hello.tsx import React from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; export interface Props { name: string; enthusiasmLevel?: number; } const Hello: React.FC = (props) => { const [enthusiasmLevel, setEnthusiasmLevel] = React.useState( props.enthusiasmLevel ); const onIncrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) + 1); const onDecrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) - 1); const getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!'); return ( Hello{' '} {props.name + getExclamationMarks(enthusiasmLevel || 0)}