分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

就好了，但是我同事说她删了 node_modules 然后重新 install 才好的，反正不知道哪里的缓存。2、根据黄色字体提示，说我包版本不对（但是这个是警告应该没事，但是我还是装了）我感觉和1、2点没关系，你可以直接执行3、4点试试。这个大概率是缓存问题，我说一下我的解决思路。

【代码】RN：'yoga/style/Style.h' file not found。

RN报错：Timeout of 120000 reached waiting for exclusive access to file: /Users/xx/.gradle/wrapper/

模拟器

react native报错

这篇文章主要带大家了解一下 app 开发的一个流程，方便后续想要做 app 的同学了解学习，接下来我会以一个前端的视角介绍 app 开发的一些情况~学习路线js：React17：app 开发基础语言React Native（RN）：app 跨端开发方案TypeScript（TS）：强类型 JavaScriptmobx-state-tree（MST）：状态管理库ignite：脚手架android：java：android 开发语言Maven：包管理工具Gradle：构建工具adb：调

接入pushy// app.tsximport { initPushyEvent, removePushyEvent } from '@/utils/pushy';useEffect(() => { initPushyEvent(); return () => { removePushyEvent(); }; }, []);// utils/pushy.tsimport { Platform, Alert, Linking, AppState

说明RN需要一个JS的运行环境， 在IOS上直接使用内置的javascriptcore， 在Android 则使用webkit.org官方开源的jsc.so。 此外还集成了其他开源组件，如fresco图片组件，okhttp网络组件等。RN 会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle), , RN的整体框架目标就是为了解释运行这个js 脚本文件，如果是js 扩展的API， 则直接通过bridge调用native方法; 如果是UI

webview是一个嵌入式的浏览器，我们平常使用频率最高的就是客户端内嵌的webview特点：运行在webview中的JS代码有能力调用原生的系统API，没有传统浏览器沙箱的限制。目前javascript和客户端（后面统称native）交互的常见方式有两种JSBridgeschemaJSBridge当我们在native内打开m页，native会在全局的window下，为我们注入一个Bridge。这个Bridge里面，会包含我们与native交互的各种方法、比如判断第三方App是否安装、获取网

参考文档https://weidian-inc.github.io/hera/#/https://blog.csdn.net/xiangzhihong8/article/details/84998455https://blog.csdn.net/xiangzhihong8/article/details/85054279https://zhuanlan.zhihu.com/p/84862926https://github.com/smallnew/react-native-multibundler

android1、app内下载原生包并安装？2、如何跳到对应的应用市场？跳应用市场没有应用市场则直接下载文件，是否跳腾讯应用宝等通用的市场2、热更新方案选型？选择官方推荐的pushy步骤：1、打包一个基础的android包2、把包上传到pushy，同时这个包分发给用户使用，此时版本为代码中写死的版本3、当需要更新包的时候，本地改代码后执行pushy的命令生成一个增量包上传到pushy后台，上传的时候可以命名版本3、热更新之后版本怎么控制？目前看来热更新的版本是维护在pushy后台的

背景app 集成微信登录。步骤1、注册在入口的时候调用 registerApp(APP_ID, UNIVERSAL_LINK); 进行微信注册2、登录使用 sendAuthRequest 拿到 code，去后端换 token 就登录成功了以上具体 api 查看下面的参考文档参考文档https://github.com/little-snow-fox/react-native-wechat-lib...

背景如果使用了第三方登录，比如微信登录等等，那么iOS这边就必须要添加苹果登录，否则无法上架 App Store步骤1、后台 Certificates, Identifiers & Profiles -> Identifiers2、xcode 选择 Sign With Apple3、添加代码到项目https://github.com/JonsonHI/SignWithApple这些代码其实你自己也可以写一套，不是什么固定的4、加上点击事件import { requir

背景我们做 app 开发的时候，有时需要点击按钮退出app。比如不同意隐私协议的时候。react-native-exit-appimport RNExitApp from 'react-native-exit-app';...RNExitApp.exitApp();...看了下源码，是这样退出的：android@ReactMethodpublic void exitApp() { android.os.Process.killProcess(android.os.Process

效果代码封装一个图片组件import React, { useState } from 'react';import { ImageStyle, View, ViewStyle, Image } from 'react-native';import { observer } from 'mobx-react-lite';import { flatten } from 'ramda';import { AdaptStyleSheet } from '@/utils/adapt-style-sh

背景我们 app 在打包上传的时候都是需要有版本号的，那么具体怎么设置呢IOS# Type a script or drag a script file from your workspace to insert its path.PACKAGE_VERSION=$(cat ../package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]')/usr

背景app 上传平台太多而且过程复杂使用 react-native-uploadreact-native-upload看文档吧，就配置一份文件，然后就是执行脚本了参考资料https://github.com/fwh1990/react-native-upload

app调用微信分享无法选择分享人，原因是因为分享的标题为空，为空的时候就会出这个问题

背景调研 h5 唤起 App 方案目的：引导已下载用户打开APP，引导未下载用户下载APP。先说结论ios9 及以上用 Universal Link（uc/qq浏览器不支持，不过safari占比最大）android6及以上用applink（chrome和小众浏览器支持，市场占比还是比想像中大的）其它情况scheme（各种限制及弹窗确认）微信ios7月的版本已经支持ulink了，android还是乖乖走应用宝吧（引导出微信也行，效果不好）ok，接下来我们一个一个聊URL Scheme有

问题h5微信支付报错：商家参数格式有误，请联系商家解决解决官方给的解决方案是：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4因为我用的是 react native，改的话需要去改 node_modules里面的 react-native-webview 包的源码。网上也有人说，直接这样设置：<WebView style={{ width: '100%', height: '100%' }} source={{

报错：No bundle URL present Make sure you’re running a packager server or have included a .jsbundle file解决：亲测有效，重启一下电脑就好了。可能是因为有打开多个项目的原因

背景app 跳到小程序后，小程序要调回 app 的时候报错 navigateBackApplication:fail，原因是要配置一些东西IOS这个东西是微信开放平台注册的应用的appid，配好之后就可以调回啦Android这里的 taskAffinity 是你的包名，如图...

获取屏幕宽高对于 React 函数组件，我们更推荐使用useWindowDimensions这个 Hook API。和 Dimensions 不同，它会在屏幕尺寸变化时自动更新。Dimensionsimport { useWindowDimensions } from 'react-native';const windowWidth = useWindowDimensions().width;const windowHeight = useWindowDimensions().height;u

文章目录注册账号内测分发注册账号官网自己注册之后，点击内测分发分发的时候会提示你要实名认证的内测分发直接把包拖进来就行更新后会拿到一个链接，在手机上访问，就可以下载啦...

使用import ScrollableTabView from 'react-native-scrollable-tab-view';import { CmvTabs, Nodata } from '@/components';<ScrollableTabView initialPage={initTabIndex} onChangeTab={(data) => onChangeTab(data)} renderTabBar={() => <CmvTabs />

其实就是 swiper，这里有个坑，一定要加上 loop={false} 才可以更改状态，否则页面会跳一下。import React, { useState } from 'react';import Swiper from 'react-native-swiper';import { Screen, Text } from '@/components';import { observer } from 'mobx-react-lite';import { View, Image, V

参考资料https://github.com/react-native-cameraroll/react-native-cameraroll

背景我们在执行 yarn start/build 的时候会实时检测打包更新，有了缓存之后可以对一些没有变换的文件不进行更新，大大节省了打包速度。缓存类型metro 的缓存实现在 node_modules/metro-cache 中，主要有两种缓存机制：服务端缓存：HttpStore本地缓存：FileStore服务端主要是通过服务器来缓存相关内容，优势是不用担心缓存的大小和时间限制，可以灵活的设置缓存策略，不过这个我们目前没有使用到，后期可以考虑。metro 默认的缓存机制是 FileSto

打包 react native 的时候报错：** BUILD FAILED **The following build commands failed: PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/zhangyu/Library/Developer/Xcode/DerivedData/rfApp-dibzynjzvmjgzggicajsawmubiue/Build/Intermediates.noindex/Pods.build/D

背景可以看到，官方的库已过时，建议我们去社区仓库选择一个，我们选择这个，也是 ignite 脚手架推荐的：https://github.com/react-native-async-storage/async-storage使用yarn add @react-native-async-storage/async-storage --saveimport AsyncStorage from '@react-native-async-storage/async-storage';const st

背景做 react native 的时候，我们需要区分不同的环境。方式一__DEV__ 是 react native 提供的一个全局变量，用于判断当前是否是开发环境。我们可以在根目录下的 app//config/env.js 写入：module.exports = __DEV__ ? require("./env.dev") : require("./env.prod")在同级新建文件 env.dev 和 env.prod ，写入你的配置就行module.exports = { API_

背景之前做 web 图表一直使用 echarts，这次做 react native 也是想继续使用，然后发现 https://github.com/somonus/react-native-echarts 这个库已经不更新了，安装试用了一下报错不支持了然后我看 issue ，有大佬解决了这些问题就是这个库 https://github.com/supervons/react-native-echarts-pro我试用了一下没发现什么问题还有一些关于 RN 其他的图表库https://githu

安装yarn add react-native-webview渲染h5import React, { Component } from 'react';import { WebView } from 'react-native-webview';class MyWeb extends Component { render() { return ( <WebView source={{ uri: 'https://infinite.red' }}

IOS1、数据线连接手机和电脑2、用 Xcode 打开 ios 文件夹3、从 Xcode 菜单栏打开Product --> Destination。从列表中查找并选择你的手机设备。Xcode 将注册为开发设备。4、这里添加完你的账号，自动关联了你所在的 Team，这里前提是你的账号已经存在于你的Team里了，如果没有的话，让你公司的主账号给你加一下，具体在 这个文章 里面的身份管理有提到。5、可以看到已经选择了 Team，Tests这里也要改一下6、点击 run，报错了 A buil

背景我们在做 RN 的时候需要用到调接口的工具，这里我们用的是 ignite 脚手架自带的 apisauce，类似 web 中的 axios、fetch 等等，官方介绍 apisauce 是Axios + standardized errors + request/response transforms.RN 官方示例用 fetch，用其他的请求方式也都没啥问题举例// showLastCommitMessageForThisLibrary.jsimport { create } from

RN 提供了阴影的 API，但是只是支持 IOS参考资料2017后就没有更新：https://github.com/879479119/react-native-shadowhttps://reactnative.cn/docs/shadow-propshttps://github.com/Kishanjvaghela/react-native-cardview

代码yarn add react-native-linear-gradientimport LinearGradient from 'react-native-linear-gradient'<LinearGradient colors={['#dbebff', '#f4f9ff']}></LinearGradient>当然还有其他的属性设置可以看文档效果参考资料https://github.com/react-native-linear-gradient/

Chrome运行 yarn start 的时候会自动打开 http://localhost:8081/debugger-uireact-native-debugger社区开源的 debugger 工具，功能强大brew install --cask react-native-debuggeropen "rndebugger://set-debugger-loc?host=localhost&port=8081"flipperFacebook 开源的 debugger 工具，功能强

文字删除线 <Text style={{textDecorationLine:'line-through'}}>删除线示例</Text>文字超出省略号 <Text numberOfLines={3}></Text>