React Native从入门到实战-开发环境搭建

落笔便是竹 發表於 2021-3-25 14:25:00

React Native从入门到实战--开发环境搭建

<h1>前言：</h1>
从今天起开启一门全新的课程学习，就是React Native，远在18年https://www.cnblogs.com/webor2006/p/9350428.html其实当时就已经做过开篇，然而很遗憾，这块的学习彻底给放弃了，造成三四年过去了，此技能依然完全不懂。。那为啥又突然要拣起它呢？原因是最近在学习这个系列课程时【我的博客】：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210314144123946-329107580.png" alt="" width="188" height="30" loading="lazy">
既将要学习到在Android项目中混编RN，这门课程的学习是花了大的心血的，为了继续学好它当然不能马虎，所欠缺的知识点该补的就得补，容不得半点偷懒，另外对我来说通过学习一门优质课程，然后课程中发现自己所缺失的再进行技能专项练习，是一个非常舒服的学习过程，因为是带着目标的，学习起来的动力也会比较充足，所以接下来准备从0开始攻克RN，作为2021年的一个新目标中的一员，希望到了明年Flutter+RN自己会觉得非常之亲切，加油！！！
在之前的第一篇其实已经完整的介绍了如何搭建RN的环境了，当时也成功的运行起来了，那干嘛这里又从开发环境学起呢？回到当时的项目工程，可以试着再运行一下便知：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210314145241040-1974225105.png" alt="" width="593" height="265" loading="lazy">
所以知道原因了吧，当时RN的版本用的是：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210314145453356-1953547637.png" alt="" width="657" height="83" loading="lazy"> 
而官方的最新版本已经到了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210314145524569-290119354.png" alt="" width="333" height="142" loading="lazy">
毕竟是横跨了3年多的时间了，所以这里以一个全新的起点，从0起步，以官方最新的方式再来对RN的环境进行一个完整的配置【由于我电脑是mac，只考虑这个平台的搭建】，为后续的学习打下坚实的基础。
<h1>开发工具的选择：</h1>
<ul>
<li>WebStorm/Nuclide/Vs Code/Subline。 由于RN的开发语言是js，其实是跟前端相关的一个技术栈，开发工具的话有如上这些可供选择，不过这里会使用大名鼎鼎Jetbrains的WebStorm，用过的都知道。</li>
<li>Android Studio。 这个对于我来说最熟悉不过了，开发Android的标配，构建RN的Android工程需要它。</li>
<li>XCode。 既然是跨平台的技术，当然与Android对立的就是IOS的喽，开发IOS的标题，构建RN的IOS工程需要它。</li>
<li>Node.js/NPM。 作为RN的基础，Node.js是必备的，目前本机安装的版本为： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315044749412-1541811466.png" alt="" width="291" height="31" loading="lazy">
而最新官网的版本为： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315044918788-642944790.png" alt="" width="429" height="208" loading="lazy">
没关系，目前先用稍老的版本，如果在学习过程中发现需要升级，到时再来升也不迟，先尽快感受RN的魅力是重点。

</li>

</ul>
<h1>搭建开发环境：</h1>
接下来则正式进入开发环境的搭建，依照官网的介绍，其实是有两种安装方式的：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315045453858-1567007212.png" alt="" width="515" height="163" loading="lazy">
下面分别来看一下。
<h2>Expo CLI QuikStart：</h2>
<h3>概述：</h3>
这种形式的构建场景就是当工程中只有js代码时，而不像之前学习时看到还有android和ios native的代码： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315050853292-161875345.png" alt="" width="193" height="194" loading="lazy">
此时就可以用这种方式来进行环境搭建。
<h3>安装Expo：</h3>
首先需要先来安装Expo工具，先来看一下Expo是啥？
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315051641548-2128698625.png" alt="" width="609" height="279" loading="lazy"> 
然后点击“Get Started”，发现网页打不开。。
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315052105578-1060837931.png" alt="" width="388" height="185" loading="lazy">
呃，咋整，度娘，https://blog.csdn.net/zhaoxiaoruiR/article/details/82459788，发现需要给咱们的网络添加两个dns：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315052701990-1338031519.png" alt="" width="466" height="380" loading="lazy"> 
而博主所说：8.8.8.8是一个IP地址，是Google提供的免费DNS服务器的IP地址，Google提供的另外一个免费DNS服务器的IP地址是：8.8.4.4 。用户可以使用Google提供的DNS服务器上网。配置好之后再运行果然就ok了，不过这里点击它：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315053017375-358415587.png" alt="" width="558" height="223" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315053142006-894213703.png" alt="" width="500" height="351" loading="lazy">
哇，好神奇，还需要先安装到个app到手机上，先不管这么多，按照官方流程走一遍，点击它进行apk的下载：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315053543685-660770603.png" alt="" width="358" height="286" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315053514321-505652678.png" alt="" width="202" height="43" loading="lazy">
安装打开之后app长这样：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315053818536-1138186525.png" alt="" width="382" height="809" loading="lazy">
其中看到有一个要扫描二维码的按钮，这块在之后会用到的。
<h3>升级node.js：</h3>
由于官网已经明确提示需要使用node这个版本以上：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054058293-1984992683.png" alt="" width="676" height="88" loading="lazy">
而本机目前是:
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054211329-54938312.png" alt="" width="342" height="36" loading="lazy">
所以咱们选一个12最大的一个版本升级一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054443142-1993564606.png" alt="" width="701" height="125" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054600117-397109220.png" alt="" width="453" height="373" loading="lazy">
安装完之后，确保版本号输出的是它：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054649229-918011019.png" alt="" width="362" height="36" loading="lazy">
<h3>npm install -g expo-cli：</h3>
接下来则需要使用nmp来安装expo的客户端，脚手架工具，如下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315054959749-1553669708.png" alt="" width="740" height="70" loading="lazy">
此安装需要稍等一会，安装结束之后如下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315055554996-553364246.png" alt="" width="727" height="320" loading="lazy">
安装成功的效果就是可以使用expo这个命令了，查看一下它的版本号：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315055737488-1317640213.png" alt="" width="399" height="40" loading="lazy">
<h3>expo init AwesomeProject：</h3>
接下来就可以使用expo命令来创建项目了，如下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315055858043-867773104.png" alt="" width="570" height="138" loading="lazy">
可以用上下方向键进行相关选择，其实就是选择创建项目的模板工程，选好之后直接回车，则就开始安装了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315060412078-694188646.png" alt="" width="454" height="81" loading="lazy">
过一会安装结束之后则会显示：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315060544447-1496168816.png" alt="" width="669" height="236" loading="lazy">
此时本地就有这个项目文件了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315060827503-1203531021.png" alt="" width="340" height="38" loading="lazy">
<h3>start a development server：</h3>
接下来进入到创建的工程中执行npm start：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315061018305-1001113936.png" alt="" width="515" height="534" loading="lazy">
其完整的日志如下：
<div class="cnblogs_code">
<pre>(base) xiongweideMBP:reactnativestudy xiongwei$ cd AwesomeProject/
(base) xiongweideMBP:AwesomeProject xiongwei$ npm start

> @ start /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject
> expo start

Starting project at /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Starting Metro Bundler
此处是一个上图的二维码图，略过。。
› Waiting on exp://192.168.0.100:19000
 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press d │ open developer tools
› shift+d │ toggle auto opening developer tools on startup (enabled)

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Error: EMFILE: too many open files, watch
at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:168:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `expo start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xiongwei/.npm/_logs/2021-03-14T22_09_53_337Z-debug.log</pre>
</div>
报错了。。然后此时会自动跳到一个网页：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315061556439-1911956479.png" alt="" width="518" height="514" loading="lazy">
此时提示需要用“expo start”尝试一下，那试一下吧：
<div class="cnblogs_code">
<pre>(base) xiongweideMBP:AwesomeProject xiongwei$ expo start
Starting project at /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Starting Metro Bundler
此处是二维码。。
› Waiting on exp://192.168.0.100:19000
 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press d │ open developer tools
› shift+d │ toggle auto opening developer tools on startup (enabled)

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Error: EMFILE: too many open files, watch
at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:168:28)</pre>
</div>
还是报错。。此时用expo在Android机上的app扫一下二维码，看到的也是报错： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315062938936-167589335.png" alt="" width="288" height="124" loading="lazy">
此时带着“Error: EMFILE: too many open files, watch”这个错误关键词上expo的官方论坛去搜一下解决方案：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315063512662-1851371510.png" alt="" width="427" height="269" loading="lazy">
在这搜到了解决方法：https://forums.expo.io/t/error-emfile-too-many-open-files/35564，
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315063607397-81363263.png" alt="" width="508" height="188" loading="lazy">
哦，需要重新安装一下watchman这个工具哟，试一下呗：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315063702697-1725757644.png" alt="" width="722" height="117" loading="lazy">
再来“expo start”，发现确实是木有报错了，此时用手机的expo app扫码网页中的二维码，就可以正常的预览reactive native工程了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315063857116-1000596823.png" alt="" width="454" height="599" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315064836239-739199257.gif" alt="" loading="lazy">
此时就可以看到创建的DEMO工程了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315065045220-512218219.png" alt="" width="269" height="578" loading="lazy">
<h3>工程结构简览：</h3>
接下来用WebStorm打开工程，瞅一下大概的工程结构：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315133806722-422912677.png" alt="" width="270" height="256" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315140420214-1178916965.png" alt="" width="546" height="297" loading="lazy">
另外还有两个配置文件：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315140654257-36616426.png" alt="" width="476" height="486" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315141529277-1149053320.png" alt="" width="612" height="331" loading="lazy">
<h2>React Native CLI QuikStart：</h2>
接下来看第二种安装方式：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315175058205-980978565.png" alt="" width="617" height="275" loading="lazy">
很显然这种方式是最为常见的，混编嘛，下面具体来看一下：
<h3>Node & Watchman：</h3>
这俩其实已经安装好了，其中说一下Watchman是干嘛的呢？https://github.com/facebook/watchman，瞅一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210315194816286-2067220983.png" alt="" width="615" height="219" loading="lazy">
也就是进行文件变化监听用的，目前安装的版本为：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316044339369-1555864817.png" alt="" width="392" height="37" loading="lazy">
<h3>具体平台搭建：</h3>
接下来则从Android和IOS两个角度分别进行搭建：
<h4>Android环境：</h4>
1、JDK安装，这块就不多说了。
2、Android Sutdio安装，并配置好相关Android环境，具体网上一大堆，略过。
3、 Creating a new application：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318045819770-492525251.png" alt="" width="613" height="98" loading="lazy">
需要等待一会，然后最后创建完则会显示它：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318050128229-1246108978.png" alt="" width="615" height="355" loading="lazy"> <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318050516746-1785246938.png" alt="" width="612" height="85" loading="lazy">
4、Running your React Native application：
<ul>
<li>
Step 1: Start Metro: <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318050428348-1568922289.png" alt="" width="394" height="101" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318050712951-626337985.png" alt="" width="404" height="332" loading="lazy">
看到上面这个提示就代表成功启动。

</li>
<li>
Step 2: Start your application: <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318050829464-2017715197.png" alt="" width="500" height="63" loading="lazy">
这里直接用真机来运行，然后执行一下上面的命令，看能否正常的运行到Adnroid手机上： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318051121417-1499732106.png" alt="" width="667" height="296" loading="lazy">
但是！！！最后报错了。。
<div class="cnblogs_code">
<pre>* What went wrong:
Execution failed for task ':app:installDebug'.
> java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unknown failure: Security exception: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag
java.lang.SecurityException: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag
at com.android.server.pm.PackageInstallerService.createSessionInternal(PackageInstallerService.java:459)
at com.android.server.pm.PackageInstallerService.createSession(PackageInstallerService.java:417)
at com.android.server.pm.PackageManagerShellCommand.doCreateSession(PackageManagerShellCommand.java:2418)
at com.android.server.pm.PackageManagerShellCommand.runInstall(PackageManagerShellCommand.java:907)
at com.android.server.pm.PackageManagerShellCommand.onCommand(PackageManagerShellCommand.java:158)
at android.os.ShellCommand.exec(ShellCommand.java:103)
at com.android.server.pm.PackageManagerService.onShellCommand(PackageManagerService.java:21933)
at android.os.Binder.shellCommand(Binder.java:634)
at android.os.Binder.onTransact(Binder.java:532)
at android.content.pm.IPackageManager$Stub.onTransact(IPackageManager.java:2809)
at com.android.server.pm.PackageManagerService.onTransact(PackageManagerService.java:4023)
at android.os.Binder.execTransact(Binder.java:735)

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 35s

at makeError (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/execa/index.js:174:9)
at /Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/execa/index.js:278:16
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async runOnAllDevices (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5)
at async Command.handleAction (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:186:9)
info Run CLI with --verbose flag for more details.</pre>
</div>
报木有权限，这是啥原因呢？度娘一下：https://www.jianshu.com/p/0dde41a26231，原来是需要打开开发者的这个选项【我调试的设备是红米7，MIUI11.0.7，不同的手机设置地方可能不太一样】： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318052028069-489155063.png" alt="" width="286" height="601" loading="lazy">
再来执行一下安装命令： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318052222033-1984168834.png" alt="" width="525" height="237" loading="lazy">
此时手机上会出现正在构建的提示： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318052147381-1114417448.png" alt="" width="445" height="149" loading="lazy"> 构建完成之后，标准的RN的DEMO页面就出现了： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318053033164-1938720480.png" alt="" width="273" height="569" loading="lazy">
其中提示按键盘可以重新加载和调出开发者菜单，注意：如果是真机此时的按键一定要在这个命令窗口进行按键操作： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318055512840-612590989.png" alt="" width="407" height="246" loading="lazy">
下面来试一下效果： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318055808189-402329591.gif" alt="" loading="lazy">
另外对于真机还有摇一摇手机的方式来调出，也就是如界面提示所示： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318053345466-239681427.png" alt="" width="220" height="87" loading="lazy">
咱们来试一下： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318053501771-1951251349.gif" alt="" loading="lazy"> 由于录屏看不到手摇的效果，这里得自行体会一下，注意要左右摇，上下摇貌似不太灵敏。

</li>

</ul>
5、Modifying your app：
接下来用webstorm打开创建的工程，打算修改一下来看一下效果：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318054142130-832148421.png" alt="" width="232" height="361" loading="lazy"> 
然后修改一下App.js文件，先来贴一下官方生成的代码：
<div class="cnblogs_code">
<pre>/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/

import React from 'react';
import type {Node} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';

import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}): Node => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
 <Text
 style={[
 styles.sectionTitle,
 {
 color: isDarkMode ? Colors.white : Colors.black,
 },
 ]}>
 {title}
 </Text>
 <Text
 style={[
 styles.sectionDescription,
 {
 color: isDarkMode ? Colors.light : Colors.dark,
 },
 ]}>
 {children}
 </Text>
</View>
);
};

const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};

return (
<SafeAreaView style={backgroundStyle}>
 <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
 <ScrollView
 contentInsetAdjustmentBehavior="automatic"
 style={backgroundStyle}>
 <Header />
 <View
 style={{
 backgroundColor: isDarkMode ? Colors.black : Colors.white,
 }}>
 <Section title="Step One">
 Edit <Text style={styles.highlight}>App.js</Text> to change this
 screen and then come back to see your edits.
 </Section>
 <Section title="See Your Changes">
 <ReloadInstructions />
 </Section>
 <Section title="Debug">
 <DebugInstructions />
 </Section>
 <Section title="Learn More">
 Read the docs to discover what to do next:
 </Section>
 <LearnMoreLinks />
 </View>
 </ScrollView>
</SafeAreaView>
);
};

const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});

export default App;</pre>
</div>
这里简单修改一下： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318060032044-467223282.png" alt="" width="520" height="299" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318061214163-770185171.png" alt="" width="417" height="216" loading="lazy">
好，看一下它的热重载效果，还是回到metro终端，按r键，发现有时候会出现这个情况： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318060742333-833049102.png" alt="" width="439" height="383" loading="lazy">
明明我改了代码呀，此时我们用摇一摇调出开发者菜单的reload试一下，发现直接报错了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318060849027-9718051.png" alt="" width="272" height="537" loading="lazy">
遇到这种情况，不要慌，重新用“npx react-native run-android”强制运行一次，然后再来到metro终端执行一下既可，而其实编辑代码就可以自动刷新了，都不用到metro窗口控r键，看一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318061653077-1900657653.gif" alt="" loading="lazy">
每次修改代码之后，按"ctrl+s"就自动刷新了，不管怎样，可能热重载会有不生效的情况，当遇到时直接用“npx react-native run-android”重新编译运行定能解决。
<h4>IOS环境：</h4>
接下来看一下IOS环境。
1、Xcode:
这块的安装就不多说了，直接上appstore进行安装既可。我本机的版本如下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316044919430-1588209031.png" alt="" width="467" height="198" loading="lazy">
2、Command Line Tools：
打开"Preferences..." ，确保安装了它：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316045102707-1162846402.png" alt="" width="628" height="285" loading="lazy">
3、Installing an iOS Simulator in Xcode：
安装一个ios模拟器，由于我没有真机，这步肯定是必备的，当然如果有真机的小伙伴这一步可有可无。
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316045759531-1012347232.png" alt="" width="220" height="485" loading="lazy">
4、CocoaPods：
如官网所示使用该命令进行安装：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316051100963-471777995.png" alt="" width="271" height="39" loading="lazy"> 
整个安装过程日志如下：
<div class="cnblogs_code">
<pre>(base) xiongweideMBP:reactnativestudy xiongwei$ sudo gem install cocoapods
Password:
Fetching concurrent-ruby-1.1.8.gem
Fetching i18n-1.8.9.gem
Fetching thread_safe-0.3.6.gem
Fetching tzinfo-1.2.9.gem
Fetching nap-1.1.0.gem
Fetching fuzzy_match-2.0.4.gem
Fetching activesupport-5.2.4.5.gem
Fetching httpclient-2.8.3.gem
Fetching algoliasearch-1.27.5.gem
Fetching ffi-1.15.0.gem
Fetching ethon-0.12.0.gem
Fetching typhoeus-1.4.0.gem
Fetching netrc-0.11.0.gem
Fetching public_suffix-4.0.6.gem
Fetching addressable-2.7.0.gem
Fetching cocoapods-core-1.10.1.gem
Fetching claide-1.0.3.gem
Fetching cocoapods-deintegrate-1.0.4.gem
Fetching cocoapods-downloader-1.4.0.gem
Fetching cocoapods-plugins-1.0.0.gem
Fetching cocoapods-search-1.0.0.gem
Fetching cocoapods-trunk-1.5.0.gem
Fetching cocoapods-try-1.2.0.gem
Fetching molinillo-0.6.6.gem
Fetching atomos-0.1.3.gem
Fetching colored2-3.1.2.gem
Fetching nanaimo-0.3.0.gem
Fetching xcodeproj-1.19.0.gem
Fetching escape-0.0.4.gem
Fetching fourflusher-2.3.1.gem
Fetching gh_inspector-1.1.3.gem
Fetching ruby-macho-1.4.0.gem
Fetching cocoapods-1.10.1.gem
Successfully installed concurrent-ruby-1.1.8
Successfully installed i18n-1.8.9
Successfully installed thread_safe-0.3.6
Successfully installed tzinfo-1.2.9
Successfully installed activesupport-5.2.4.5
Successfully installed nap-1.1.0
Successfully installed fuzzy_match-2.0.4
Successfully installed httpclient-2.8.3
A new major version is available for Algolia! Please now use the https://rubygems.org/gems/algolia gem to get the latest features.
Successfully installed algoliasearch-1.27.5
Building native extensions. This could take a while...
Successfully installed ffi-1.15.0
Successfully installed ethon-0.12.0
Successfully installed typhoeus-1.4.0
Successfully installed netrc-0.11.0
Successfully installed public_suffix-4.0.6
Successfully installed addressable-2.7.0
Successfully installed cocoapods-core-1.10.1
Successfully installed claide-1.0.3
Successfully installed cocoapods-deintegrate-1.0.4
Successfully installed cocoapods-downloader-1.4.0
Successfully installed cocoapods-plugins-1.0.0
Successfully installed cocoapods-search-1.0.0
Successfully installed cocoapods-trunk-1.5.0
Successfully installed cocoapods-try-1.2.0
Successfully installed molinillo-0.6.6
Successfully installed atomos-0.1.3
Successfully installed colored2-3.1.2
Successfully installed nanaimo-0.3.0
xcodeproj's executable "xcodeproj" conflicts with /usr/local/bin/xcodeproj
Overwrite the executable? ^[y
xcodeproj's executable "xcodeproj" conflicts with /usr/local/bin/xcodeproj
Overwrite the executable? y
Successfully installed xcodeproj-1.19.0
Successfully installed escape-0.0.4
Successfully installed fourflusher-2.3.1
Successfully installed gh_inspector-1.1.3
Successfully installed ruby-macho-1.4.0
cocoapods's executable "pod" conflicts with /usr/local/bin/pod
Overwrite the executable? y
Successfully installed cocoapods-1.10.1
Parsing documentation for concurrent-ruby-1.1.8
Installing ri documentation for concurrent-ruby-1.1.8
Parsing documentation for i18n-1.8.9
Installing ri documentation for i18n-1.8.9
Parsing documentation for thread_safe-0.3.6
Installing ri documentation for thread_safe-0.3.6
Parsing documentation for tzinfo-1.2.9
Installing ri documentation for tzinfo-1.2.9
Parsing documentation for activesupport-5.2.4.5
Installing ri documentation for activesupport-5.2.4.5
Parsing documentation for nap-1.1.0
Installing ri documentation for nap-1.1.0
Parsing documentation for fuzzy_match-2.0.4
Installing ri documentation for fuzzy_match-2.0.4
Parsing documentation for httpclient-2.8.3
Installing ri documentation for httpclient-2.8.3
Parsing documentation for algoliasearch-1.27.5
Installing ri documentation for algoliasearch-1.27.5
Parsing documentation for ffi-1.15.0
Installing ri documentation for ffi-1.15.0
Parsing documentation for ethon-0.12.0
Installing ri documentation for ethon-0.12.0
Parsing documentation for typhoeus-1.4.0
Installing ri documentation for typhoeus-1.4.0
Parsing documentation for netrc-0.11.0
Installing ri documentation for netrc-0.11.0
Parsing documentation for public_suffix-4.0.6
Installing ri documentation for public_suffix-4.0.6
Parsing documentation for addressable-2.7.0
Installing ri documentation for addressable-2.7.0
Parsing documentation for cocoapods-core-1.10.1
Installing ri documentation for cocoapods-core-1.10.1
Parsing documentation for claide-1.0.3
Installing ri documentation for claide-1.0.3
Parsing documentation for cocoapods-deintegrate-1.0.4
Installing ri documentation for cocoapods-deintegrate-1.0.4
Parsing documentation for cocoapods-downloader-1.4.0
Installing ri documentation for cocoapods-downloader-1.4.0
Parsing documentation for cocoapods-plugins-1.0.0
Installing ri documentation for cocoapods-plugins-1.0.0
Parsing documentation for cocoapods-search-1.0.0
Installing ri documentation for cocoapods-search-1.0.0
Parsing documentation for cocoapods-trunk-1.5.0
Installing ri documentation for cocoapods-trunk-1.5.0
Parsing documentation for cocoapods-try-1.2.0
Installing ri documentation for cocoapods-try-1.2.0
Parsing documentation for molinillo-0.6.6
Installing ri documentation for molinillo-0.6.6
Parsing documentation for atomos-0.1.3
Installing ri documentation for atomos-0.1.3
Parsing documentation for colored2-3.1.2
Installing ri documentation for colored2-3.1.2
Parsing documentation for nanaimo-0.3.0
Installing ri documentation for nanaimo-0.3.0
Parsing documentation for xcodeproj-1.19.0
Installing ri documentation for xcodeproj-1.19.0
Parsing documentation for escape-0.0.4
Installing ri documentation for escape-0.0.4
Parsing documentation for fourflusher-2.3.1
Installing ri documentation for fourflusher-2.3.1
Parsing documentation for gh_inspector-1.1.3
Installing ri documentation for gh_inspector-1.1.3
Parsing documentation for ruby-macho-1.4.0
Installing ri documentation for ruby-macho-1.4.0
Parsing documentation for cocoapods-1.10.1
Installing ri documentation for cocoapods-1.10.1
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, nap, fuzzy_match, httpclient, algoliasearch, ffi, ethon, typhoeus, netrc, public_suffix, addressable, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try, molinillo, atomos, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 72 seconds
33 gems installed</pre>
</div>
5、Creating a new application:
<blockquote>
tips：这一步如果已经创建过了可以省略，在上面android环境中已经创建了一个项目了，为啥在ios中又拎出来呢，因为有一些异常情况在上面忘了说明了，这里再创建一次，真实对于一个RN项目只需要创建一次既可，这一点一定要注意哦~~
</blockquote>
如官网所示：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316050156461-582109303.png" alt="" width="536" height="146" loading="lazy">
执行一下命令：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316050328742-1806836937.png" alt="" width="717" height="163" loading="lazy">
稍等片刻之后，安装最后发现有一些小问题：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316052239538-1241984642.png" alt="" width="584" height="258" loading="lazy">
好吧，按提示来修复一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316052534025-931705528.png" alt="" width="643" height="226" loading="lazy">
呃，先不管这么多吧，其实项目是已经创建成功了：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316053129557-1133652982.png" alt="" width="595" height="126" loading="lazy"> 
这里直接尝试运行到ios试一下效果。
6、Running your React Native application：
<ul>
<li>Step 1: Start Metro： 这一步骤跟上面Android环境搭建的一样，目前已经启动了： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210318063011444-2112065707.png" alt="" width="383" height="324" loading="lazy"></li>
<li>Step 2: Start your application： 
<h4><img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316053208982-1636944843.png" alt="" width="682" height="95" loading="lazy"></h4>
看接下来整个运行的一个曲折过程，各种错。。
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316053439266-1658628590.png" alt="" width="637" height="179" loading="lazy">
然后在日志最后看到如下错误：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316055054990-464747693.png" alt="" width="611" height="346" loading="lazy">
带着这样的关键字去google一下，搜到这么一个贴子：https://github.com/react-native-community/cli/issues/1311，
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316055449736-802563763.png" alt="" width="762" height="412" loading="lazy">
哦，到ios目录中运行一下"pob install"，试一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316055608400-807240822.png" alt="" width="669" height="345" loading="lazy">
用网页访问一下，貌似确实是连不上：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316060313048-394573010.png" alt="" width="244" height="267" loading="lazy">
关于github上不去看了此贴https://blog.csdn.net/Hodors/article/details/103226958之后，发现取消一下全局代理貌似就可以了：
<div class="cnblogs_code">
<pre>取消全局代理：
git config --global --unset http.proxy
git config --global --unset https.proxy</pre>
</div>
但是！！！还是不行，最后在贴子这个评论上看到了这句话才意识到，就是需要设置代理才行：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316061607437-1304651497.png" alt="" width="617" height="113" loading="lazy"> 
我的梯子用的是它： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316061636459-824329764.png" alt="" width="102" height="35" loading="lazy">
然后对应的代理端口为【具体的代理端口得依赖于本机代理软件】：
<div class="cnblogs_code">
<pre>git config --global http.proxy http://127.0.0.1:58591
git config --global https.proxy http://127.0.0.1:58591</pre>
</div>
然后再来进行安装，不要太顺：
<div class="cnblogs_code">
<pre>(base) xiongweideMBP:ios xiongwei$ git config --global http.proxy http://127.0.0.1:58591
(base) xiongweideMBP:ios xiongwei$ git config --global https.proxy http://127.0.0.1:58591
(base) xiongweideMBP:ios xiongwei$ pod install
Auto-linking React Native module for target `my_app`: react-native-document-picker
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.64.0)
Installing FBReactNativeSpec (0.64.0)
Installing Flipper (0.75.1)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.5.1)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.3.0)
Installing FlipperKit (0.75.1)
Installing OpenSSL-Universal (1.1.180)
Installing RCT-Folly (2020.01.13.00)
Installing RCTRequired (0.64.0)
Installing RCTTypeSafety (0.64.0)
Installing React (0.64.0)
Installing React-Core (0.64.0)
Installing React-CoreModules (0.64.0)
Installing React-RCTActionSheet (0.64.0)
Installing React-RCTAnimation (0.64.0)
Installing React-RCTBlob (0.64.0)
Installing React-RCTImage (0.64.0)
Installing React-RCTLinking (0.64.0)
Installing React-RCTNetwork (0.64.0)
Installing React-RCTSettings (0.64.0)
Installing React-RCTText (0.64.0)
Installing React-RCTVibration (0.64.0)
Installing React-callinvoker (0.64.0)
Installing React-cxxreact (0.64.0)
Installing React-jsi (0.64.0)
Installing React-jsiexecutor (0.64.0)
Installing React-jsinspector (0.64.0)
Installing React-perflogger (0.64.0)
Installing React-runtimeexecutor (0.64.0)
Installing ReactCommon (0.64.0)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Installing libevent (2.1.12)
Installing react-native-document-picker (5.0.1)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `my_app.xcworkspace` for this project from now on.
Pod installation complete! There are 50 dependencies from the Podfile and 41 total pods installed.

[!] FBReactNativeSpec has added 1 script phase. Please inspect before executing a build. See `https://guides.cocoapods.org/syntax/podspec.html#script_phases` for more information.</pre>
</div>
其中最后提示需要关闭一下xcode，然后此时咱们再来rn运行看一下：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316063004979-1217575630.png" alt="" width="639" height="248" loading="lazy"> 
然后google了这么一个贴子：https://developer.apple.com/forums/thread/656509，然后发现个大佬说了这句话：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210316063359456-247854542.png" alt="" width="674" height="419" loading="lazy"> 很遗憾，还是报错。。而且经过2天的各种网上的搜寻在我的机子上并未解决，编译解决了，但是就是无法在模拟器安装，总是报如下错：
<div class="cnblogs_code">
<pre>(base) xiongweideMacBook-Pro:my_app xiongwei$ npx react-native run-ios
info Found Xcode workspace "my_app.xcworkspace"
info Building (using "xcodebuild -workspace my_app.xcworkspace -configuration Debug -scheme my_app -destination id=4B986B00-DB5C-4BC2-88E8-9208EECCE46D")
success Successfully built the app//这里编译成功了
info Installing "/Users/xiongwei/Library/Developer/Xcode/DerivedData/my_app-demfxoevpcgjzffobcmwsnnltnvh/Build/Products/Debug-iphonesimulator/my_app.app"
An error was encountered processing the command (domain=IXUserPresentableErrorDomain, code=1):
This app could not be installed at this time.
Could not install at this time.
Failed to chmod /Users/xiongwei/Library/Developer/CoreSimulator/Devices/4B986B00-DB5C-4BC2-88E8-9208EECCE46D/data/Bundle/Application/D643368A-9DED-46A0-A933-EF30ADF5EFD5/my_app.app/my_app : No such file or directory
Underlying error (domain=MIInstallerErrorDomain, code=4):
Failed to chmod /Users/xiongwei/Library/Developer/CoreSimulator/Devices/4B986B00-DB5C-4BC2-88E8-9208EECCE46D/data/Bundle/Application/D643368A-9DED-46A0-A933-EF30ADF5EFD5/my_app.app/my_app : No such file or directory
info Launching "org.reactjs.native.example.my-app"
error Failed to launch the app on simulator, An error was encountered processing the command (domain=FBSOpenApplicationServiceErrorDomain, code=1):
The request to open "org.reactjs.native.example.my-app" failed.
The request was denied by service delegate (SBMainWorkspace) for reason: NotFound ("Application "org.reactjs.native.example.my-app" is unknown to FrontBoard").
Underlying error (domain=FBSOpenApplicationErrorDomain, code=4):
The operation couldn’t be completed. Application "org.reactjs.native.example.my-app" is unknown to FrontBoard.
Application "org.reactjs.native.example.my-app" is unknown to FrontBoard.//运行总是报错</pre>
</div>
然后带着这样的错误在StackOverFlow上看到这么一个提示https://stackoverflow.com/questions/57510972/unable-to-install-reactnative-app-on-ios-simulator： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319050413576-497575935.png" alt="" width="528" height="221" loading="lazy"> 而且还有一个贴子https://stackoverflow.com/questions/59856755/ios-react-native-app-build-succeeded-but-app-not-getting-open-in-ios-device-si说需要将xCode进行升级，升到12以上版本。。 <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319052023659-491139075.png" alt="" width="507" height="199" loading="lazy">
由于xCode12有11.6g的大小。。目前我的版本为： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319052328421-2099066217.png" alt="" width="162" height="67" loading="lazy">
升级Xcoder的方案不太想采纳，于是乎决定采用RN的降级策略，而实际工作中对于软件版本的选择也并不是越新越好，而对于学习来说，弄个次新版本完全不影响学习，所以接下来就是选择哪个次新版本的问题了，经过本地多次尝试，最后发现降为它就可以了【注意：每个人机器的环境不一样，可能适用的版本也会有差别，当遇到运行不了的，可以采用类似的降级策略进行尝试】： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319052950509-1944667367.png" alt="" width="305" height="457" loading="lazy">
那如何在创建工程时指定版本呢？官网有说明： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319053253890-114914900.png" alt="" width="536" height="122" loading="lazy"> 所以将之前创建的RN工程给删除掉，重新使用指定版本来创建： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319053600002-1425777787.png" alt="" width="584" height="127" loading="lazy">
创建成功则可以进行运行了： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319053654029-1523028302.png" alt="" width="662" height="97" loading="lazy">
此过程需要耐心等待一下，最终就运行成功了，跟上面Android的效果一样： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319054239277-995641679.png" alt="" width="652" height="75" loading="lazy">
其中会自动打开metro窗口的： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319054359196-13600955.png" alt="" width="479" height="311" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319054505842-529101814.png" alt="" width="218" height="473" loading="lazy"> 由于是模拟器，所以此时不用像上面运行真机Android那样对于热重载需要对着metro终端来进行按键，这里直接对模拟器上进行“cmd+r”和“cmd+d”既可： <img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319054858086-1339239938.gif" alt="" width="210" height="438" loading="lazy"> 那选的这个版本在android运行上也正常么，测一下：
<div class="cnblogs_code">
<pre>(base) xiongweideMacBook-Pro:my_app xiongwei$ react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 960 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Installing the app...
Downloading https://services.gradle.org/distributions/gradle-6.0.1-all.zip
......................................................................................................................................

Welcome to Gradle 6.0.1!

Here are the highlights of this release:
- Substantial improvements in dependency management, including
- Publishing Gradle Module Metadata in addition to pom.xml
- Advanced control of transitive versions
- Support for optional features and dependencies
- Rules to tweak published metadata
- Support for Java 13
- Faster incremental Java and Groovy compilation
- New Zinc compiler for Scala
- VS2019 support
- Support for Gradle Enterprise plugin 3.0

For more details see https://docs.gradle.org/6.0.1/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

> Task :app:compileDebugJavaWithJavac

> Task :app:installDebug
06:04:36 V/ddms: execute: running am get-config
06:04:36 V/ddms: execute 'am get-config' on '4ee36565' : EOF hit. Read: -1
06:04:36 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Redmi Note 7 - 9' for app:debug
06:04:36 D/app-debug.apk: Uploading app-debug.apk onto device '4ee36565'
06:04:36 D/Device: Uploading file onto device '4ee36565'
06:04:36 D/ddms: Reading file permision of /Users/xiongwei/Documents/workspace/reactnativestudy/my_app/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--
06:04:37 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
06:04:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on '4ee36565' : EOF hit. Read: -1
06:04:41 V/ddms: execute: returning
06:04:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
06:04:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on '4ee36565' : EOF hit. Read: -1
06:04:41 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 2m 25s
27 actionable tasks: 27 executed
info Connecting to the development server...
info Starting the app on "4ee36565"...
Starting: Intent { cmp=com.my_app/.MainActivity }</pre>
</div>
妥妥的，所以在接下来的RN学习中，版本就由目前最新的0.64改为次新的0.62.2。
</li>
</ul>
7、Modifying your app：
最后再来修改一下代码来看一下在ios实时变更的效果：
<img src="https://img2020.cnblogs.com/blog/324374/202103/324374-20210319055732278-1942331262.gif" alt="" loading="lazy">
<h1>总结：</h1>
这次学习就是纯环境搭建了，本以为很轻松愉悦的【android平台确实是很轻松，基本没遇到啥问题】，木有想到在ios上栽了好多跟头，最后不得以降为次新版本来解决ios平台的问题，当然可能还有其它办法能完全解决最新版本在ios运行不了的问题，但！！！我放弃了，因为折腾几天了，时间上不值，而且对于一门全新的技术学习得尽快往下进行，不然挫败感太强导致都没有信心继续往下前行了，环境已经搞好，下次则正式进入RN的基础篇喽~~ 
来源：https://www.cnblogs.com/webor2006/p/14555391.html

頁: [1]

琼殿技术论坛's Archiver

React Native从入门到实战--开发环境搭建