React Native

Python实战社群 Java实战社群 长按识别下方二维码， 按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群 ▲ 作者 | Instabug 译者 | 王强 策划 | 李俊辰 来源丨前端之巅（ID：frontshow） https://mp.weixin.qq.com/s/qJTB9eyAtIJ3PJZ1kh4T7w 谷歌的 Flutter 跨平台应用开发框架正迅速成为移动跨平台开发人员的最爱。尽管 Flutter 由于谷歌的大力支持正在迅速成熟，但社区仍然没有太多第三方开发工具可用。不过仔细挑选的话，好用的 Flutter 开发工具还是能找到一些的。在本文中，我们将介绍一些目前可用的顶级工具。 Panache：Flutter material 主题编辑器 Panache 是Flutter 的开源、基于浏览器的 material 主题编辑器，可让你为 Flutter 应用创建美观且可高度自定义的主题。使用这个 Flutter 开发工具，你可以自定义组件和小部件的颜色，并将主题导出为 theme.dart 文件。 项目地址 https://rxlabz.github.io/panache Supernova：Flutter 设计到代码工具 Supernova 是一款功能强大的设计到代码工具，可将你的 Sketch 和 Adobe XD

现在前端圈子最热的莫过于 ReactNative。以 Web 的开发方式来开发 Native，并且仗这 facebook 这个国际互联网公司做保证，这种革命性的产品都让前端 coder 和客户端 coder 都炸开了。 本文打算以 ReactNative 的 Text 标签的角度，这个最基本的标签，来带你跨入入 ReactNative 的世界的第一步。 如果把 React Native 上的 View 标签对应成 web 的 div 标签，那么想把 Text 标签对应为 web 的 Span 标签或者 P 标签真是大错特错。严格来说，你应该把 Text 当初一个 ReactNative 的组件！（是的，本身就是！） Text 标签在 ReactNative 上非常非常的常用，其属性方法，内部细节为开发者所必须掌握的。同时我们能透过 Text 标签，也能理解 ReactNative 上的一些设计理念。 一，文本输出必须用 Text 标签包起来 这点大家应该都比较清楚，如果使用 View 标签输出文本，ReactNative 是会直接报错的，我们必须用 Text 标签包起来。 1 2 3 4 5 // 直接编译不通过，少年 < View > Some text < / View > // success < View > < Text > Some text < / Text > <

##引言 React Native路由导航，有它就够了！该文档根据 React Navigation 文档翻译，有些内容会根据自己的理解进行说明，不会照搬直译，若发现理解有问题的地方，欢迎大家提点！由于本人是基于iOS开发，安卓版本的目前还没有去实践运行，后续有时间会去实践，如果遇到问题，可以@我。最后，这边针对iOS运行的时候遇到的问题也有汇总，并提供解决方案。最后的最后，由于本片文章会很长，所以推荐一个Chrome插件，可以自动根据文章中的h1~h6生成目录，方便查看章节内容，在编写文章时也可以用哦！ Smart TOC ，点击安装后，如下图操作： 基本原理 1 开始 如果您已经熟悉React Native，那么您将能够快速上手React导航!如果没有学习过，你需要先读 React Native Express 的第1 - 4部分(包括第4部分)，读完后再回到这里。 本文档的基础部分介绍React导航的最重要的方面。它足以让您了解如何构建典型的小型移动应用程序，并为您提供深入了解React导航更高级部分所需的背景知识。 1.1 安装 在RN项目中安装您需要的包 npm npm install @react-navigation/native 复制代码 yarn yarn add @react-navigation/native 复制代码 React导航由一些核心工具组成

react-native-tencent-im-ui 腾讯云即时通信 IM 服务的react-native，使用原生ui版本得sdk 起因，项目中需要用到基础的im功能（聊天和聊天列表），晚上搜了一圈也没有找到，技术栈已经定好，也只能硬着头皮搞了。 直接给大家分享出来，目前功能简单，如果有简单需求的可以直接使用。 当前基于 TIMSDK UI版本 标准版 5.0.6 @2020.09.18 项目地址： https://github.com/mengyou658/react-native-tencent-im-ui 支持功能 聊天列表功能 聊天功能 待支持的功能 不支持自定义界面（可以yarn install 后，在node_models/react-native-tencent-im-ui/更改里面的代码或者直接clone项目复制先来粘贴过去改吧，虽然不方便，但是也能实现，一个个封装代码都不够项目成本的😂） 离线消息 用户信息编辑 加好友 等等。。。 支持版本 react-native 0.60 以上版本 如何安装 1.安装包 注意需要 --save 参数，react-native会自动link $ npm install react-native-tencent-im-ui --save $ yarn add react-native-tencent-im-ui 2. link

300天350个版本，路孚特旗舰移动产品“0”到“1”的交付之路 2020-05-26 02:41 InfoQ 作者 | Eileen 要想认识路孚特这家金融数据科技公司，没有什么比数据更直观。 路孚特为全球 190 多个国家的 4 万多家机构和 40 万用户提供金融信息服务，其交易数据每秒传递高达 700 万条更新，支撑着全球 5000 多家投资公司和对冲基金的交易，每天更新的市场数据多达 400 亿条。在其开放平台上，超过 1 万 3 千名开发者和 2200 多家合作伙伴，共同以安全、有效、高效的方式构建金融行业的业务发展以及其各项创新。 2018 年，路孚特完成从汤森路透金融与风险业务部门到路孚特（Refinitiv）的转变。作为世界上最大的金融市场数据和基础设施供应商之一，160 多年历史的专业经验铸就了路孚特新一代业务流程优化系统 Refinitiv Workspace，针对全球金融市场从业人士的不同需求，以此为用户提供全面深入的金融数据、分析、新闻、工具等客制化解决方案。 在移动设备已经非常普及的今天，时间的碎片化带来流量的碎片化。面向消费者的互联网产品早在五六年前便完成了 PC 端向移动端的过渡，但对监管严格的金融行业来说，一切似乎才刚刚开始。在路孚特的移动平台战略中，非常重要的一步是打造 Refinitiv Workspace 的移动版本——Refinitiv

什么是Lottie动画 Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果，动画效果比原生动画要优美很多。Lottie动画由UI提供，UI给到我们的是xxx.json文件，这个文件就是动画文件。 优点：动画效果好，灵活，导入方便，使用简单，可以从网络下载，支持多平台。 缺点：性能没有属性动画好。 导入Lottie动画库 github地址 在app build.gradle 中导入 implementation 'com.airbnb.android:lottie:$lottieVersion' $lottieVersion 为版本号。 注意2.8.0及之后的版本加入了android x, 如果你的项目没有使用android x ，要使用2.8.0之前的版本，否则会编译失败 Lottie 2.8.0 and above only supports projects that have been migrated to androidx. 导入动画文件 在 main文件夹下创建assets文件夹，将json文件放入assets文件夹下。需要确认json中是否包含本地文件路径，例如 img0/image1

谷歌大会之后，有不少人咨询了我 Flutter 相关的问题，其中有不少是和面试相关的，如今一些招聘上也开始罗列 Flutter 相关要求，最后想了想还是写一期总结吧，也算是 Flutter 的阶段复习。 ️系统完整的学习是必须需要的，这里只能帮你总结一些知识点，更多的还请查阅 Dart/Flutter 官网。 本篇主要是知识点总结，如有疑问可点击各文章链接了解详情，或者查阅我 掘金专栏 。 Dart 部分 其实学习过 JavaScript 或者 Java/Kotlin 的人，在学习 Dart 上几乎是没什么难度的， Dart 综合了动态语言和静态语言的特性, 这里主要提供一些不一样，或者有意思的概念。 1、 Dart 属于是 强类型语言 ，但可以用 var 来声明变量， Dart 会 自推导出数据类型 ， var 实际上是编译期的“语法糖”。 dynamic 表示动态类型 ， 被编译后，实际是一个 object 类型，在编译期间不进行任何的类型检查，而是在运行期进行类型检查。 2、 Dart 中 if 等语句只支持 bool 类型， switch 支持 String 类型。 3、 Dart 中 数组和 List 是一样的。 4、 Dart 中， Runes 代表符号文字 , 是 UTF-32 编码的字符串, 用于如 Runes input = new Runes('\u{1f596

React-native集成CodePush热更新ios篇 首先请移步React-native集成CodePush热更新android篇（https://blog.csdn.net/qq_41457238/article/details/106118779），根据教程注册CodePush账号，创建应用获取Staging和Production的key。 并在js中集成好codepush部分  开始ios端集成 1.首先确保rn项目能正常启动 2.执行yarn add react-native-code-push安装codepush库（根据自己RN版本来安装codepush库） 3.rn0.6版本之前需要执行：react-native link react-native-code-push；rn0.6之后的版本会自动link项目，不需要执行此命令 4.使用xcode打开项目，按步骤依次执行，在第五步点击+之后，选择Duplicate "Release Configaration，输入Staging 5.根据图片步骤到第三步之后，设置Debug和Staging的值为Staging的key，设置Release的值为Production的key。 具体查看key的方法为：code-push deployment ls -k 6.打开Info.plist文件

支持格式 官方说支持aif, wav, ogg, mp3，少就少吧，这些格式还并非全平台通用，放个mp3，windows,mac平台会告诉你说不支持 在build settings中修改成android后没问题了，ios没试过。 麻烦的读取 对于音频的读取需要手动指定，完全是坑爹的操作，react native, flutter哪个不是直接拿来用就成了？你得指定用哪种格式来读取。 上面这个错误是因为我读取参数忘记改了，一读ogg就出错。 using (var uwr = UnityWebRequestMultimedia.GetAudioClip(path, AudioType.MPEG)) { ... 应该写成AudioType.OGGVORBIS，搞笑的AudioType里面有ACC，然后看注释： // // 摘要: // Type of the imported(native) data. public enum AudioType { // // 摘要: // 3rd party / unknown plugin format. UNKNOWN = 0, // // 摘要: // Acc - not supported. ACC = 1, ACC不支持，让我有种 某天回家老婆开心的对我说：老公，咱中500万大奖了，然后再加句：逗你玩 的感觉。 本地、远程表现不一致

QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级，然而页面的打开耗时与 Native 页面相距甚远，需要系统性优化。本 文将介绍 QQ 音乐 Android 客户端在进行 Web 页面通用性能优化过程中的问题、思路、方案和效果，并尝试对跨端场景的常见瓶颈和对策进行归纳。文章作者：关岳，QQ音乐客户端开发工程师。 一、问题与目标 作为一款注重于内容运营的应用程序，QQ 音乐 Android 客户端的 Web 页面日均 PV 达到千万量级，评论页、MV 页等核心页面均有 Web 页面参与，或完全由 Web 实现。 客户端内 Web 页面的打开耗时与 Native 页面相距甚远，需要系统性优化。然而，现有的前端和跨端优化方案，存在一定局限性。 1. 前端优化的局限 针对 Web 页面的耗时优化，在优化思路、方案、服务、工具链等方面都已经建设得非常详细。然而，在客户端内 Web 页面这一场景，纯前端优化存在以下两个局限： 无法规避 WebView 初始化耗时 受限于 WebView 生命周期范围 从客户端角度，除了思考优化 WebView 初始化耗时之外，还可以从 “扩展前端生命周期” 的角度出发，思考优化方案。 2. 跨端优化的局限 现有跨端优化方案，包括离线包、VasSonic 等，为了达到最好的优化效果，均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加