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。

直接启用TypeScript支持

npx react-native init AwesomeProject --template react-native-template-typescript

这样更方便。

Web环境运行

参考了轻松几步教你将React Native 项目运行在Web端

yarn add react-native-web
yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack

按照参考内容中的做法在package.json的scripts部分添加了指令:

"build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
"web": "webpack serve --mode=development --config webpack.config.js",

然后创建相关文件。

运行yarn web后成功，可以通过http://localhost:8080访问了。

webpack.config.js的内容不研究了，不熟悉这个，需要的时候再说。

Native新增了一个react-native/Libraries/NewAppScreen的资源，但是Native Web并没有对应实现，所以需要重写App.tsx才行。

暂时的小结

实际测试并不如意，也对比了网上的其它一些资料，比如三端同构之类关键字，测试之后也是各种问题。所以回到需求，一套代码同时适于App和Web是否合理，到底需要的是一套代码多端运行还是只是想用浏览器调试比较方便。或者，我还是看看Ionic吧。

懒人不贴图，文章结束。