使用RN笔记

一、学习说明

1. 
   
2. 了解React和RN的基本语法；
   
3. RN无法使用div、p、img都不能使用，只能使用RN固有的组件；
   
4. 需要结合安卓的签名打包步骤，并使用RN提供的打包命令进行完整apk文件发布，最终发出来的就是Release版本的项目
   
5. webAPP开发方式：
   

• 
  
• **H5+****：**需要做出一个完整的网站，然后在网站的基础上使用打包技术，其内部运行的还是网站，
  
• **RN：**需要开发一个模板项目，这个模板不能运行到浏览器和手机中，完成后使用RN的打包命令后，把模板的代码翻译成原生的java代码，最终打包成原生手机app，只不过使用前端技术开发而已。
  

二、搭建开发环境

1. 
   
2. http://www.react-native.cn/docs/enviro…(注：一定要仔细看文档的译注否则根本运行不了，根据文档的注释下载相应的包)
   
3. 运行‘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组件