乐趣区

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

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

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

初始化 Native 我的项目

确认没有装置过 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。失常关上了。

装置 TypeScript

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

懒人不贴图,文章完结。

退出移动版