React Native开发经验汇总 - xw332/xw332.github.io GitHub Wiki

React Native错误收集汇总

IOS开发相关

Xcode build慢的几个解决方案

https://blog.csdn.net/zhaoxy_thu/article/details/30073485

https://www.jianshu.com/p/c805949c2d33

Xcode清理硬盘空间

https://www.jianshu.com/p/bfa10b5c4234

Android开发相关

AndroidX升级踩坑

https://www.jianshu.com/p/499e645ad148

手动下载RN依赖的第三方库，解决下载卡住的问题

https://www.cnblogs.com/richard-youth/p/9718892.html

三方库目录，0.58及以上版本：

~/Library/Caches/com.facebook.ReactNativeBuild

0.58以下的版本：

~/.rncache

ReactNative ios.jsbundle文件生成

https://www.jianshu.com/p/ea00601dbe0f

ReactNative的ios自动化打包流程记录

1、生成.p12证书

登录苹果开发者网站：https://developer.apple.com/

创建自己app的Bundle Identifier对应的App ID，上传本地签名文件，生成Apple Push Services，下载并双击导入钥匙串，在新加的证书上右击导出，输入密码，就会生成p12证书，可以发给别人或者个推之类的推送网站

2、生成.mobileprovision文件

在苹果开发者网站，添加测试机设备号，生成并下载包含设备信息的文件

4、在Xcode上登录开发者账号，配置上面生成的依赖文件，并正常编译archive

5、创建sh打包脚本

脚本中需要用到的变量：

输入变量：app_name、scheme_name、xcodeproj_path、InfoPlist_path、ExportOptions.plist、CFBundleShortVersionString、CFBundleVersion

输出变量：export_path、archive_path、ipa_path

核心代码：

xcodebuild archive -project $workspace_path -scheme $scheme_name -configuration $buildConfiguration -archivePath $archive_path -sdk iphoneos
xcodebuild -exportArchive -archivePath $archive_path -exportOptionsPlist $ExportOptionsPlist -exportPath $export_path -PROVISIONING_PROFILE="Automatic" -allowProvisioningUpdates

成功生成ipa和plist后，开发包可以上传七牛或fir，正式包可以上传testflight或appstore

参考链接：

https://blog.csdn.net/jia12216/article/details/82685687

https://blog.csdn.net/gauss_li/article/details/51062504

https://testflight.apple.com/

https://itunesconnect.apple.com/

https://fir.im/

ReactNative的安卓自动化打包流程记录

1、登录甲骨文官网或国内的软件网站，下载安装JDK1.8

2、生成签名密钥my-release-key.keystore

核心代码：keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

3、把签名配置加入到项目的android/gradle.properties和android/app/build.gradle文件中

4、替换android/build.gradle文件里的google()和jcenter()为阿里云链接，加快依赖包下载速度，

5、生产apk包

先执行sudo chmod +x gradlew，为gradlew命令添加可执行权限

再执行cd android && ./gradlew assembleRelease

APK 文件位于android/app/build/outputs/apk/release/app-release.apk

参考链接：

https://reactnative.cn/docs/signed-apk-android/

https://maven.aliyun.com

https://blog.csdn.net/yyh352091626/article/details/52343951

修复mockjs在ReactNative环境不支持的问题

// mockjs-rnfix.js
window.Event = class Event {
  constructor(type) {
    this.type = type;
    return this;
  }
};
window.location = { href: '' }
// index.js
import axios from 'axios';
import './mockjs-rnfix';
import Mock from 'mockjs';

React Native 性能优化指南

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

React Native webview

react-native-webview：版本比RN自带的旧版webview新，打开页面比旧版快，尤其在应用冷启动后的页面首次加载比较明显

https://www.npmjs.com/package/react-native-webview

https://www.npmjs.com/package/react-native-webview-file-upload-android

https://www.npmjs.com/package/react-native-android-fullscreen-webview-video

React Native WebView关闭缓存

核心代码: webview的source参数里设置headers中的Cache-Control

Cache-Control: no-cache或max-age=600, must-revalidate

总结：

no-cahce并不是表示无缓存，而是指使用缓存一定要先经过验证

response header的no-cache和max-age=0和request header的max-age=0的作用是一样的：都要求在使用缓存之前进行验证

request header的no-cache，则表示要重新获取请求，其作用类似于no-store

React Native加载本地Html研究

webview和html双向通信bridge

https://www.jianshu.com/p/b1c7007aa6b8

https://www.jianshu.com/p/f963839fca1a

React Native 网络请求axios封装

https://www.jianshu.com/p/8951810b2e88

用不了Xcode10模拟器解决方案

https://www.jianshu.com/p/3dec6d391169

Xcode的硬盘缓存占用定期清理

https://www.v2ex.com/t/397902

React-Navigation

https://reactnavigation.org/docs/getting-started/

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

https://www.cnblogs.com/maopixin/p/10034763.html

https://blog.csdn.net/zhizhuodewo6/article/details/91038273

https://blog.csdn.net/qq_34645412/article/details/86064050

echarts图表组件

https://www.npmjs.com/package/react-native-secharts

https://www.npmjs.com/package/react-native-echarts-wrapper

https://www.npmjs.com/package/native-echarts

native-echarts 问题汇总

https://www.jianshu.com/p/941a299cc5aa

https://segmentfault.com/a/1190000015758777

native-echarts组件Android打包修改

https://blog.csdn.net/zzqwxx/article/details/80856738

bugly - 腾讯异常统计平台接入

https://bugly.qq.com/docs/user-guide/instruction-manual-android/?v=20200114181137

React-Native两个图片展示问题

https://axiu.me/coding/react-native-two-issues-about-image/

react-native 不定宽高网络图片解决方案

https://linxiaoru.github.io/2017/08/28/react-native-%E4%B8%8D%E5%AE%9A%E5%AE%BD%E9%AB%98%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

Flow 在 react 项目中基本使用

https://blog.csdn.net/mjzhang1993/article/details/82692674

react native 关于FlatList滚动事件的坑

https://www.jianshu.com/p/9d61e9ab2ad6

React Native 调用 Web3（1.x）的正确姿势

https://www.cnblogs.com/qiyecao/p/9689223.html

如何解决web3.js与React Native冲突

https://www.jianshu.com/p/20ef79b8af14

参考链接：

https://www.cnblogs.com/jkr666666/p/10559898.html

https://segmentfault.com/a/1190000007317481

https://blog.csdn.net/polo2044/article/details/80779528

https://blog.csdn.net/eroswang/article/details/8302191

https://blog.csdn.net/lqlqlq007/article/details/79940017

https://blog.csdn.net/u012107143/article/details/100734720

常用三方依赖组件

@stomp/stompjs
axios
mockjs
moment
prop-types
query-string
react-native-autogrow-textinput
react-native-camera
react-native-code-push
react-native-contacts
react-native-device-info
react-native-fast-image
react-native-i18n
react-native-image-picker
react-native-image-resizer
react-native-image-zoom-viewer
react-native-keyboard-aware-scroll-view
react-native-keyboard-manager
react-native-linear-gradient
react-native-modal
react-native-modal-popover
react-native-nested-scroll-view
react-native-orientation
react-native-permissions
react-native-pinch
react-native-qrcode-svg
react-native-render-html
react-native-rk-pull-to-refresh
react-native-root-toast
react-native-screenshot-notifier
react-native-screenshot-observer
react-native-scrollable-tab-view
react-native-share
react-native-slider
react-native-snap-carousel
react-native-splash-screen
react-native-spring-scrollview
react-native-step-indicator
react-native-storage
react-native-sync-localstorage
react-native-svg
react-native-swipe-list-view
react-native-swiper
react-native-tab-view
react-native-table-component
react-native-text-gradient
react-native-update
react-native-vector-icons
react-native-vertical-view-pager
react-native-view-shot
react-native-webview
react-native-webview-invoke
react-navigation
react-redux
redux
redux-logger
redux-thunk
rn-viewpager
uuid

React Native开发经验汇总 - xw332/xw332.github.io GitHub Wiki

IOS开发相关

Xcode build慢的几个解决方案

Xcode清理硬盘空间

Android开发相关

手动下载RN依赖的第三方库，解决下载卡住的问题

ReactNative ios.jsbundle文件生成

ReactNative的ios自动化打包流程记录

ReactNative的安卓自动化打包流程记录

修复mockjs在ReactNative环境不支持的问题

React Native 性能优化指南

React Native webview

移动 H5 首屏秒开优化方案探讨

WebView性能、体验分析与优化

React Native如何优雅的处理WebView加载无效的uri

react native 关于ScrollView嵌套WebView的交互问题

react-native-webview HTML和RN通信 互传、接收数据（H5上传图片为例）

一行代码搞定react-native-webview 安卓无法播放h5视频问题

解决ReactNative Webview加载时候白屏问题

React Native WebView关闭缓存

React Native加载本地Html研究

React Native 网络请求axios封装

用不了Xcode10模拟器解决方案

Xcode的硬盘缓存占用定期清理

React-Navigation

echarts图表组件

bugly - 腾讯异常统计平台接入

React-Native两个图片展示问题

react-native 不定宽高网络图片解决方案

Flow 在 react 项目中基本使用

react native 关于FlatList滚动事件的坑

React Native 调用 Web3（1.x） 的正确姿势

如何解决web3.js与React Native冲突

常用三方依赖组件

react-native-webview HTML和RN通信互传、接收数据（H5上传图片为例）

React Native 调用 Web3（1.x）的正确姿势