react native基本使用

创建项目

• npm install -g yarn react-native-cli
• 安装android sdk
• 配置android_home
• 添加platform-tools目录到path
• 创建项目react-native init 项目名称

项目初始化失败，配置如下 npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist

编译

react-native start运行 添加VScode调试配置后（配置使用react native调试）

在这里插入图片描述

yarn 安装包（npm会有些问题）

• rn 的android添加local.properties内容如下，指定android sdk存放位置

sdk.dir=D:/ProgramFiles/Android/Android_SDK

调试是出错误提示，可以检查任务管理器，关闭所有执行中的node.exe程序，node端口占用可能导致调试连接失败，也可以关闭react native包生成工具，node程序大概是用作生成包的

在这里插入图片描述

adb连接

adb devices显示正常

在这里插入图片描述

react-devtools调试ui

访问地址（先启动调试，否则vscode提示已经建立调试连接错误），浏览器devtool可以查看变量： http://localhost:8081/debugger-ui/

npm install -g react-devtools下载rn独立的devtools程序，调试react native界面

运行react-devtools，启动界面如下

在这里插入图片描述

adb reverse tcp:8097 tcp:8097 浏览器中点击reload按钮连接

apk程序，设置toggle inspector后，选中控件，可以高亮react-devtools中的模块

修改源码

node_modules/react-native目录下面 ReactAndroid/src/main/java/com/facebook/react/views/modal/可以修改编译的目标控件

react native布局尺寸

react view设置flex占满剩余空间，view设置style大小才管用（其他空间，设置style好像不行，比较坑）

react安装unimodules

https://docs.expo.io/bare/installing-unimodules/

混合模式

与原生的java代码混合

添加第三方模块

react-native link @react-native-community/art 命令修改android/settings.gradle和android/app/build.gradle文件

自定义原生控件

错误

• Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

cd project/android gradlew clean 删除android/app/build重新编译 app:processDebugResources FAILED错误：升级gradle，检查后台是否运行多个java

• React Native编译错误 Cannot find module @babel/core解决方案 删除node_modules后重新安装，关闭所有node.exe程序，
• vscode调试打包错误，手动点击vscode下面的停止包生成工具按钮，重新启动打包

原理

Gradle构建项目、依赖android sdk或者ios

autolink功能

修改下面三个文件

• settings.gradle
• app/build.gradle

在这里插入图片描述

注意检查android/app/build.gradle的android版本

在这里插入图片描述

• MainApplication.java

react web

npm install react-web-cli -g react-web init 文件夹 https://www.jianshu.com/p/917c35c0b0b4

https://zhuanlan.zhihu.com/p/90181422

react native for windows

npx react-native-windows-init --overwrite(修改npm config的配置路径，如果npx路径包含空格) https://microsoft.github.io/react-native-windows/docs/getting-started

参考：https://reactnative.cn/docs/0.44/android-building-from-source.html

react native 错误

TypeError: Super expression must either Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

自定义组件，是否导出模块或者导入模块是否存在 React native断开连接后重连，成功加载后才能有界面上的错误提示，否则只能在vscode中看到错误，app中没有call stack显示）

另一个调试工具占用，vscode调试退出

先启动vscode调试，再打开http://localhost:8081/debugger-ui/（占用调试资源）

Starting a Gradle Daemon, 6 busy Daemons could not be reused

android 目录中gradlew.bat --stop关闭gradle，重启电脑都会有记录，只能执行命令

打包发布

android目录下，gradlew assembleRelease