关于react-native:React-Native安装记录20220624

28次阅读

共计 1302 个字符，预计需要花费 4 分钟才能阅读完成。

for React Native v0.69

时过境迁，包含官网的装置指引都跟不上时代变动啊，折腾半天反正是能够了，记下来心愿能够帮忙到他人。

Windows 10 64 位家庭版
手机模拟器夜神
Node node -v v16.13.1 (官网要求不低于 14)
JavaSDK javac --version v11.0.7 (官网要求不低于 11)
Android Studio Android Studio Chipmunk | 2021.2.1 (这个是本次新装的，凭本人感觉装吧，两头会提醒被墙，我没高效上网，跳过)
装置之后看了很多他人的装置教训，最初什么也没做，只把环境变量注册了。(留神启用 Android Studio，点击自定义 -> 全副设置，外观和行为 -> 零碎设置 -> 安卓 SDK，复制一下本地 SDK 装置门路（如果你晓得 SDK 目录能够不必干这个)。
回到操作系统，增加零碎环境变量 ANDROID_HOME，值就是方才复制的 SDK 目录。
编辑零碎环境变量 PATH，增加以下四项：

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

如果还开着命令行工具的话关掉它（不然大概率不会本人重载环境变量的更新），筹备工作实现。

确认没有装置过 react-native-cli，装过请卸载。
进入本人的工作目录执行 npx react-native init AwesomeProject 就好了，会主动创立 AwesomeProject 目录。

执行 yarn react-native run-android 会生成一个 apk，位于我的项目门路下的android/app/build/outputs/apk/debug/app-debug.apk。执行过程中会报错，因为没开模拟器。

看一下本人的 ip，通常我的项目会默认在 8081 端口。运行夜神模拟器，把下面的 apk 拖进模拟器，装置后运行报错，此时点菜单中的更多(… 图标)，再点击弹出菜单中的菜单（三横线图标）关上配置项，将开发设置中的服务端地址里写上本人的 ip 和端口。从新关上夜神，再次运行 app。失常关上了。

yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript

从已有的 react 我的项目的根目录复制 tsconfig.json。
在根目录新建rn-cli.config.js，内容为:

module.exports = {getTransformModulePath() {return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {return ['ts', 'tsx'];
  },
};

将 App.js 更名为 App.tsx，感觉好多了。
再次启动服务 npx react-native start。

懒人不贴图，文章完结。

正文完