2023年6月27日发(作者：)

RN开发填坑之旅⼤概是2017年底接触的RN，当时项⽬开发中遇到很多问题，都是⾃⼰⼀步⼀个坑⾛过来的。看了下当时的笔记，觉得还是在这⾥记录下，防丢失。React-native APP 开始1. App Store下载Xcode并安装（about one hour）2.

3. npm install -g react-native-cli4. react-native init MyApp（最新版可能下载失败导致⽆法成功run ios，所以⽤下⾯的version）react-native init MyApp --version 0.44.3iOS模拟器调试1. cd 进⼊MyApp⽬录下（你的项⽬⽬录）2. react-native run-ios3. 若报错：xcrun: error: unable to find utility "instruments", not a developer tool or in PATH解决：sudo xcode-select -s /Applications//Contents/Developer/4. 若模拟器爆红：No bundle URL present解决1:在模拟器运⾏期间 项⽬⽬录下执⾏npm install解决2:检查翻墙的代理，由全局模式改为⾃动模式即可5.

iOS真机调试1. 打开Xcode2. 绑定Apple ID：Xcode 》preferences 》accounts3. 选中左侧project根⽬录，点击右侧General配置4. identity 》Bundle identifier 输⼊唯⼀标识（保证唯⼀即可）5. Signing 》Team 选中刚刚绑定的Apple ID对应的team6. 点击左上⾓run 按钮右侧运⾏设备选项，选中USB已连接的你的设备7. run8. 过程中出问题按照提⽰对设备进⾏授权配置9. 若build时就出错，尝试重启Xcode，再run10. 若connect server error：查看⼿机电脑wiffi是否⼀致，若不⼀致，停掉服务重新run11. 若报错The application does not have a valid 下重跑android调试1. cd进⼊MyApp⽬录2. react-native run-android3. 若报错：Error watching file for changes: EMFILE解决办法：watchman出错，卸载并重装brew uninstall --force watchmanrm -rf/usr/local/var/run/watchman/brew install watchman4. 错误信息不明时可打开android studio查看详情5. 若gradle的问题：可能因为android studio 的gradle没加载成功，修改ties⽂件内url为其他版本,例：或改成本地地址在setting内加以配置6.

7. 报错could not connect development server：（坑！）(1). android studio debug运⾏模式，(2). 打开命令⾏，cd到当前⽬录，react-native start(3). 真机或模拟器reload，成功与否(4). 若失败：adb reverse tcp:8081 tcp:8081，reload(5). 若command adb not found："adb"不是内部命令和sudo: adb: commandnot found8. 真机adb⽆响应：（可能因为其他应⽤占⽤adb的5037端⼝）解决：netstat -aon|findstr “5037” 找到占⽤端⼝的进程PID， 打开任务管理器，杀掉对应进程。 重新run9.

react-native学习指南参考：给所有开发者的React Native详细⼊门指南引⽤antd-mobile的坑1. 对于莫名其妙的问题，确保⾃⼰antd-mobile的版本不要太低，坑2. 对于找不到module的问题，请⽤yarn安装，cnpm安装可能会漏掉⼀些依赖3. 对于antd-mobile not defined 的错误，确保安装了react-dom，antd-mobile，babel-plugin-import，并且修改.babelrc ⽂件，例：{

"plugins": [["import", { "libraryName": "antd-mobile" }]], "presets": ["react-native"]}在react-native使⽤Icon1. 使⽤antd-mobile的IconRN 版本由于 Icon ⽆法做纯 UI，需要 native ⽀持打开 iOS 项⽬

⽂件，添加

Fonts provided by application，指定⼀个 item 的值为

， 将

拖进项⽬；Android 项⽬将

放在

android/app/src/main/assets/fonts/ ⽬录下;使⽤⽅式：内置的⼏个图标： ⾃定义图标： (具体参看 demo)⾃定义图标： (具体参看 demo)2. 使⽤react-native-vector-icons参考react-native-vector-icons的简单使⽤3.

若出现搜不到的问题，尝试卸载APP重启native-echarts1. React Native使⽤百度Echarts显⽰图表的⽰例代码2. Android 上图表有时不显⽰问题原因：图形渲染⽀持的不好？解决：隐藏包含echart的div，数据填充渲染结束后显⽰div，中间要有⼀定时间的延迟，⽐如100ms3.

android打包1. 根据RN官⽹推荐⽅式打包2. 若类似错：Could not find :gradle:3.0.0.可能：⾃⼰android studio版本不是3.0.0，换成对应版本或者：android/下buildscript { repositories { ... google() }}3. 若报错：Could not get unknown property 'MYAPP_RELEASE_STORE_FILE'原因：将如下代码加⼊到android/ties, **改为密钥MYAPP_RELEASE_STORE_FILE=reMYAPP_RELEASE_KEY_ALIAS=my-key-aliasMYAPP_RELEASE_STORE_PASSWORD=****MYAPP_RELEASE_KEY_PASSWORD=****4. 项⽬中⽤到react-native-echarts，在android打包后⽆法显⽰图表：原因：release版本只能使⽤uri加载资源（）解决：1. 把node_modules/native-echarts/src/components/Echarts/⽂件复制⼀份到android/app/src/main/assets⽂件⾥2. 修改node_modules/native-echarts/src/components/Echarts/：source={require('./')}改为source={{uri:'file:///android_asset/'}}3. 打包后记得改回来，不然ios⽆法正常显⽰图表5. 修改版本信息：android在android/app/⽂件下修改其中versionCode⼀般是整数，上传appstore时，每次都需⽐上次数字要⼤，否则不予覆盖上⼀版本versionName⽤于在app上显⽰版本信息，供⾃⼰或⽤户查看defaultConfig{ versionCode 1 versionName "1.0"}6.

IOS打包1. 在Xcode中选择Product -> Scheme -> Edit Scheme (cmd + <)，然后选择Run选项卡，将Build Configuration设置为release2. 在ios中⽤http请求需做配置，参照让iOS项⽬允许使⽤http协议请求3. run，若想调试，将Build Configuration重新设置为debug4. ⼀键打包：React-Native中iOS⼀键打包发布脚本5. 设置应⽤图标和闪屏图⽚react native ios打包到真机6. 若出现其他⼿机⽆法run release版本，报错:can't link with a main executable file '/Users/liujinling/Library/Developer/Xcode/DerivedData/gngcApp-glzeunbnyelbpmcrehcygunmtjfq/Build/Products/Release-iphoneclang: error: linker command failed with exit code 1 (use -v to see invocation)解决：product ->schema-> edit ->schema-> run 选择release build 中xxxTests 只勾选Test，

build中xxx 勾选全部7. 账号下⼿机连接数量达上限，⽆法使⽤其他⼿机调试或安装：原因：免费的账号连接设备数应该是3个左右，想连接更多的测试机，升级到收费账号，可连100个设备解决：1. 申请企业收费开发者账号 2. General／signing／Team：添加⼀个新的account8. 安装release版时报错：Could not write to the device,或A valid provisioning profile for this executable was not found.:原因：我这⾥因为切换team（开发者账号）导致解决：Xcode上⽅导航栏product下clean操作，重新run9.

Mac 下gradle配置android studio 下载gradle极慢，所以下载到本地⾃⼰配置1.

2. 命令open .gradle 打开finder，3. 进⼊wrapper/dists/gradle-4.1-all/(njsjdscn),删掉⽬录下所有4. 将下载的拉进来，重启android studio记⼀次重⼤填坑现场在android和ios真机+模拟器run成功n次，双机打包均跑成功后，再次android真机调试时，突然的gradle构建失败WTF诡异1：android打包时按照react-native官⽹配置了⼀些⽂件，今天打开代码，发现⼀会这⾥多了个‘g’，⼀会那⾥classpath被删掉，还有其他的属性名缺了⼀半，连后⾯紧跟了个’android‘……细思极恐诡异2：react-native-linear-gradient库突然⽆法正确引⼊？错误提⽰：:react-native:+诡异3：android/app/⽂件找不到:react-native:+解决：1. 在android studio 报错处跟踪进react-native-linear-gradient，添加⼀块代码，既然gradle找不到:react-native:+,我们就告诉他怎么找repositories { jcenter()}2. 在android/app/添加如下代码allprojects { repositories { jcenter() mavenCentral() mavenLocal() maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } }}若url "$rootDir/../node_modules/react-native/android"报错，将其改为url "$rootDir/node_modules/react-native/android"。应该是通过yarn安装的react-native使⽤前者，通过npm安装的使⽤后者莫名其妙的坑，踩了⼀下午，燥⼜⼀次重重⼤填坑现场RN Android ⽂件预览1. 利⽤react-native-doc-viewer*注意注释部分const handlePress = (name,id) => { const nameArr = ('.'); const type = nameArr[ - 1]; //adUrl + id是⽂件的下载地址 const downloadUrl = adUrl + id + '.' + type; if ( === 'ios') { //IOS（成功预览） c([{ url: downloadUrl, //此处url后缀必须带⽂件type（例：.doc） //原因：ios配置没有fileType，需靠url后缀识别⽂件类型 fileNameOptional: name //ios的fileNameOptional取值中⽂是ok的 }], (error, url) => { if (error) { (error); } else { (url, '成功') } }) } else { //Android（除图⽚外，其他⽆效，打不开⽂件） c([{ url: adUrl + id, //此处url直接为下载地址，⽆需特意加类型后缀 fileName: name, //Android的fileName取值中⽂报错 cache:false, fileType:type }], (error, url) => { if (error) { (error); } else { (url, '成功') } }) } }2. 辅助react-native-fs//Androidconst SavePath = ntDirectoryPath;//const SavePath = alDirectoryPath;//const SavePath = alStorageDirectoryPath;//当配合react-native-doc-viewer，以上三个路径均测试，⽆法打开⽂件//当配合原⽣模块，使⽤第⼆个//const SavePath = ndlePath //ios的存储路径const options = { fromUrl: downloadUrl, //加不加类型后缀都ok toFile: `${SavePath}/${name}`,};adFile(options).(res => { (res, 'res') //配合react-native-doc-viewer（⽆效） c([{ url: `file://${SavePath}/${name}`, //此处url为系统内部路径，前⾯需加‘file://’ fileName: name, //Android的fileName取值中⽂报错 cache:false, fileType:type }], (error, url) => { if (error) { (error); } else { (url, '成功') } }) //配合原⽣模块（成功） (`${SavePath}/${name}`)

}).catch(err => { (err, 'err')})3.

react-native-fs加原⽣模块实现//任意位置新建⼀个类（java⽂件）package ativeModules;import ty;import ;import ;import peMap;import ;import pplicationContext;import ontextBaseJavaModule;import ethod;import ;import ;public OpenFileModule(ReactApplicationContext reactContext){ super(reactContext); } @Override public String getName(){ return "OpenFileModule"; } //getName为必需 @ReactMethod private void show(final String filePath) { String ext = ing(dexOf('.')).toLowerCase(); try { MimeTypeMap mimeTypeMap = gleton(); String temp = ing(1); String mime = eTypeFromExtension(temp); Intent intent = new Intent(); ion(_VIEW); File file = new File(filePath); aAndType(le(file), mime);//这⾥原本：startActivity(intent);

//但由于react调原⽣⽅法，不存在原⽣activity，报错，使⽤下⾯两句代替 Activity currentActivity = getCurrentActivity(); ctivity(intent); } catch (Exception e) { tackTrace(); xt(getReactApplicationContext(), "⽆法打开后缀名为." + ext + "的⽂件！", _LONG).show(); } }//任意位置定义⼀个包（java⽂件） package ativeModules; import ackage; import riptModule; import Module; import pplicationContext; import nager; import ist; import tions; import ; /** * Created by liujinling on 2018/1/23. */ public class OpenFilePackage implements ReactPackage{ @Override public List createViewManagers(ReactApplicationContext reactContext) { return ist(); } @Override public List createNativeModules( ReactApplicationContext reactContext) { List modules = new ArrayList<>();

//OpenFileModule为上⽂新建的类名 (new OpenFileModule(reactContext)); return modules; } //此处为必需 @Override public List> createJSModules() { return ist(); } }//在内注册模块（必需） protected List getPackages() {

return Arrays.asList(

//OpenFilePackage为上⽂新建的包名 new MainReactPackage(),new OpenFilePackage());

}

//js中使⽤ import {NativeModules} from 'react-native'; //注意这⾥的path需带⽂件类型后缀 //且前⾯不要加‘file://’ //直接取alDirectoryPath存储的地址 const path = '/data/file/' (path)android中TextInput顶起TabBar问题⽬录：android/app/src/main/中的标签中，添加android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"gngcApp极光推送苹果开发者平台：苹果开发者平台证书配置：iOS 证书申请和使⽤详解官⽅描述证书配置：iOS 证书设置指南1. 若报错：The provisioning profile specified in your build settings ("test") has an AppID of "" which does not match your bundle identifier

""原因：⽂件中的bundle ID与创建证书时的不⼀致解决：1. 修改⽂件中的bundle ID保持⼀致2. 把Build Settings中Package分栏下的Product Bundle Identifier改成新的bundle ID2.

App设置应⽤名字、图标、启动页⽣成应⽤图标：图标⼯⼚只需上传⼀张1024*1024的应⽤图标，该⽹站会⾃动为你⽣成各种适配版本的icon，包括ios和androidios应⽤名称：Xcode内target/info/Custom iOS Target Propperties下的Bundle display name修改为应⽤名称应⽤图标：项⽬⽬录下ts/AppIcon内，将需要适配的图标拖进去，注意：若要上传到App Store，1024*1024的图标⼀定要上传启动页：关于iOS APP设置启动图⽚推送通知图标：极光推送默认选取应⽤图标android应⽤名称：android/app/src/main/res/values/内，修改应⽤名称应⽤图标：android/app/src/main/res/⽂件夹下图标⽂件替换为图标⼯场下载下来的⽂件们启动页：推送通知图标：极光推送默认选取应⽤图标，但在anfroid上可能⾏不通，android/app/src/main/res⽬录下说明：若没有res/drawable-xxxx/jpush_notification_icon这个资源默认使⽤应⽤图标作为通知icon，在5.0以上系统将应⽤图标作为默认推送图标，官⽹如是说。没有可以新建⼀个，把图标命名为相应名称。项⽬中res下图标⽤的是mipmap，不是drawable，所以新建相应路径尝试。不⾏的话，重启⼿机，此为坑。再不⾏，换个⼿机试试，可能当前⼿机有缓存。