使用RN笔记

qKK
1,515 阅读2分钟

一、学习说明

  1. 了解React和RN的基本语法；
  2. RN无法使用div、p、img都不能使用，只能使用RN固有的组件；
  3. 需要结合安卓的签名打包步骤，并使用RN提供的打包命令进行完整apk文件发布，最终发出来的就是Release版本的项目
  4. webAPP开发方式：
  • **H5+****：**需要做出一个完整的网站，然后在网站的基础上使用打包技术，其内部运行的还是网站，
  • **RN：**需要开发一个模板项目，这个模板不能运行到浏览器和手机中，完成后使用RN的打包命令后，把模板的代码翻译成原生的java代码，最终打包成原生手机app，只不过使用前端技术开发而已。

二、搭建开发环境

  1. www.react-native.cn/docs/enviro…(注：一定要仔细看文档的译注否则根本运行不了，根据文档的注释下载相应的包)
  2. 运行‘adb devices’的命令查看手机是否连接成功

三、遇到的问题

react-active-webview****直接使用会报**"RNCWebView" was not found in the UIManager.**

  • 解决办法：1.停止项目，cd ios目录运行npx pod install命令下载包
  • 包下完了运行npx react-active link react-native-webview 这时会提示连接ios 和android 成功
  • 重新编译项目 npx react-active run-android 后就可以正常使用了

在React Native开发的时候编译androidreact-native run-android莫名遇到以下的buildfailure：

:app:compileDebugAidl:app:compileDebugRenderscript:app:generateDebugBuildConfig:app:mergeDebugShaders UP-TO-DATE:app:compileDebugShaders UP-TO-DATE:app:generateDebugAssets UP-TO-DATE:app:mergeDebugAssets UP-TO-DATE:app:generateDebugResValues:app:generateDebugResources:app:mergeDebugResources:app:recordFilesBeforeBundleCommandDebug FAILED

解决办法：cd android运行./gradlew --stop

react-native 其他请求都没有问题，但是文件上传会报错（‘Network request failed’）

  • 原因：Flipper Network构建initializeFlipper时出现的问题。

  • 解决：找到android/app/src/debug/java/com/**/ReactNativeFlipper.java文件注释43行 

    new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } });

打包时报错JVM内存不够

  • 打开gradle.properties文件 添加org.gradle.jvmargs=-Xmx4608M ，如果是真机测试可以注释。

打包时报错Execution failed for task ':xxxxx:verifyReleaseResources'

  • 是因为Android版本更新到了28，而第三方插件未及时更新，需要打开第三方包的android/build.gradle文件 将23修改成28

react-native-webView 交互

  • RN发送给HTML：

    RN页面首先绑定ref={webView => this.webView = webView} 通过this.webView.message.postMessage(data)来传递内容，html通过 window.onload = function() { document.addEventListener('message', function(msg) { console.log(msg) }); }来获取

  •  HTML发送给RN：

    RN页面首先绑定ref={webView => this.webView = webView} 通过webView自带的 onMessage={(event)=>{ const data = event.nativeEvent.data this._handleMessage(data); }}来获取 HTML通过window.ReactNativeWebView.postMessage("h5 to rn") 来传递内容

四、常用命令和插件

 ./gradlew clean --stacktrace android清除缓存 

 ./gradlew assembleRelease --stacktrace android打包 

rm -rf node_modules && yarn cache clean 删除项目依赖包以及 yarn 缓存 

rm -rf ~/.rncache 清除 React-Native 缓存 

react-native-image-picker 上传图片

react-native-calendars 日历 

react-native-file-selector 文件管理

teaset ui组件

avatar
文章
阅读
粉丝