82 天前 / Dunizb
众所周知，React 是一个由 Facebook 编写的免费开源 JavaScript 库，用于创建高度动态的 Web UI。Facebook 后来创建了 React Native 来开发跨平台原生移动应用程序，使用 React 作为开发人员的核心接口，这使他们能够使用基于 React 语法的单一代码库为 Android 和 iOS 构建原生移动应用程序。 React 通常将其组件变化渲染为 DOM（文档对象模型），但它也可以将组件渲染为 HTML，以满足服务器端渲染（SSR）的要求。
143 天前 / 实时音视频A桑
自从 Agora SDK for React Native v3.0.0 发布后，现在用户可以同时加入无限数量的频道。但你同时只能向一个频道发布自己的摄像头视频流。这种功能在多房间的情况下真的很方便，你既可以发送和接收主房间的音视频，同时也可以接收次要房间的音视频。我们将使用 Agora RTC SDK for React Native 作为我们的例子。下载最新版本 Agora RTC SDK for React Native，请访问这里：npmjs.com/package/react-native-agora 在深入了解它的工作原理之前，我们先来看看几个关键点： 我们将使用 SDK 连接到第一个频道并正常加入音视频通话。
146 天前 / Dunizb
计划在 2021 年进行响应式开发？但不确定你应该选择哪种技术来快速开发你的应用程序，而且还要降低成本？如果对两个问题的回答都是肯定的，那么您将有两个主要选择：Flutter 或 React Native！ 但同样，哪种技术是跨平台应用开发的最佳选择，对你来说仍是一个头疼的问题！ 尽管互联网上有大量信息可以为您解释每种技术的基本知识，利弊。但是你将如何比较所有这些优点和缺点，从而决定哪种技术最适合你的应用开发需求？ 通过使用这两种技术的经验，我可以帮助您在构建跨平台移动应用程序时区分这两种最流行和最常用的技术。
481 天前 / 祝坤荣(时序)
原文：https://blog.logrocket.com/co... 2020.1.31 翻译： 祝坤荣 ( 时序) email: zhukunrong@yeah.netURI versus URL in the image element（图像标签的 URI 和 URL） 当在图像标签中显示远程图片时，你需要将原对象命名为 URI，就像这样： 如果你错误的用了"URL"，而不是"URI"，在 iOS 设备上可以正常显示，但在安卓设备上就会挂掉。知道这个坑可以节省你大量的 debug 时间。 String outside textInvariant Violation: Text strings must be rendered within component. This error is located at: in a (at App.js:29) in RCTScrollContentView (at S...
488 天前 / 祝坤荣(时序)
原文：https://blog.logrocket.com/common-bugs-in-react-native/ 2020.1.31 翻译： 祝坤荣 ( 时序) email: zhukunrong@yeah.net React Native 是可以用来同时实现 Android 和 iOS 平台应用的不错的框架。由于它被 React 社区和 Facebook 支持，它离 version 1.0 还很早。 一些你遇到的 error 可能很容易被误导或极难发现。最近，React Native 团队在向开发者提问来帮助他们确定哪些恼人的 error 可能会让人失望。当他们定位了最差的 error， 让我们看看这些 issue 并且讨论下当他们跳出来时如何定位。
564 天前 / HueiFeng
总篇 88 篇 2020 年 第 12 篇 1、背景“汽车人”App 是汽车之家自主研发的一款移动办公应用。已经经历了多年的版本更新迭代，从最初的 0.X 系列到现在的 4.1.X，从原生开发到现在的跨平台，平台应用有 70+ 个，目前在线的应用覆盖了日常绝大多数的移动办公场景。汽车人 App 最初采用原生的开发方式，Android 和 iOS 同时上线一个功能时，两端都要实现一遍，耗时耗力。和大多数原生应用一样，无法应对业务快速变化，在没有热修复或热更新的前提下，通过原生发新版让用户频繁升级极度影响用户体验。因此这种纯原生开发模式无法满足之家业务快速变化的需求。
589 天前 / 携程技术
作者简介 海涛，携程前端开发工程师，负责机票主流程预订、React Native 技术栈相关开发工作。 前言 本文将主要介绍在携程中文 APP 国内机票模块中，对往返机票的预定流程改造期间，在 React Native 中进行复杂动画、手势交互的经验总结，包括复杂交互对于 RN 页面的性能开销，以及在不断解决问题的过程中总结出来的实践方案。 一、背景 项目背景源自于产品需求。经过产品调研，旧有的往返机票预定分页模式在用户体验中存在以下痛点： 用户需要反复进行信息确认，确认过程中切换页面有较强跳出感； 往返的去程列表和返程列表认知度不高...
752 天前 / 美团技术团队
总第357篇 2019年 第35篇 2018年，我们开源了React Native组件库——beeshell 1.0。时隔一年，我们对React Native组件库继续优化，实现beeshell 2.0升级，开源38个功能。希望更好的服务社区，同时也希望利用社区力量丰富React Native组件库。引言 随着 React Native（以下简称 RN）技术的出现，大前端的发展趋势已经势不可挡，跨平台技术因其通用性、低成本、高效率的特点，逐渐成为行业追捧的热点。为了进一步降低开发成本、提升产品迭代的效率，美团开始推广使用 RN 技术。随之而来，相关业务方开始提出对 RN 组件库的诉求。
798 天前 / 会飞的Pikachu
前言第一次接触 React Native 是在四年前实习的时候，当时在项目中使用的 RN 版本是 0.28.x，间隔四年之后，再次在项目中使用 RN 时版本已是 0.57.x。在撰写本文时，RN 的版本是 0.60.4，所以，本文将以 0.60.4 版本为基础，简要分析 RN 应用在 Android 平台上的启动流程。 Hello World用 RN 来写一个 Hello World 应用非常简单。通过 RN cli 生成项目之后，更改程序的入口文件即可： import { Text, AppRegistry } from 'react-native'import App from './App'// ...AppRegistry.registerComponent('HelloWorld', () => App);程序的入口文件一般是通过 ...
817 天前 / 人人贷大前端技术中心
本文介绍如何实现利用共享UI元素的动画，实现类似苹果App Store的Today页面的动画效果，我们先看最终的效果：
第一步：完成静态UI布局UI布局很简单，就是一个普通的ScrollView，我们直接看代码：
819 天前 / ElevenBeans
画一条精细无比的实线还记得一开始作为前端小萌新，被 0.5px 支配的恐惧吗？ “你这条线画的有问题，跟我视觉稿上不一样，看起来不够精致～”“就一条线，咋不一样？咋不精致？”“你这个粗了一点点！”“哪有？？？我看不出来啊？？？”“很明显啊！你再帮我调小 0.5 个像素。”“。。。” 当年我们幸运 + 惊喜地发现 CSS 有伪元素、有 transform: scaleY(0.5)，可以相对画出一条精确到小数点的线条时，才意识到：原来细微处还有这么多门门道道呵。
820 天前 / 携程技术中心
作者简介 任跃华, 携程机票前台软件工程师，从事机票android、react和react native技术栈相关研发工作。 前言 携程机票前台团队在使用 React Native 实现众多业务的过程中，经历了前期少量探索，中期大量应用，后期架构和性能优化的三个阶段。 在该技术栈积累了一定经验之后，结合不同业务的特点和复杂性，我们重新审视和思考一些前期实践项目的整体优化方向。在 App 国际机票查询列表页的相关业务模块，基于 Clean Architecture 整洁架构之道的思想，进行了一次技术大重构。
872 天前 / 开发者头条
点击链接或图片即可阅读 喜欢请分享到朋友圈哦 项目介绍 Alita，战斗天使阿丽塔，原型是《铳梦》中一位不断战斗和自我超越的生化改造少女。 Alita 是一套 React Native 代码转换引擎工具。它对 React 语法有全新的处理方式，支持在运行时处理 React 语法，可以用简洁、高效的方式把 React Native 代码转换成微信小程序代码，并且实现了 React Native 和微信小程序之间的主要组件对齐。 借助 Alita 引擎，可以实现用 React Native 进行多终端业务开发，除了官方支持的 Android、iOS 外...
872 天前 / 人人贷大前端技术中心
首发于大前端博客园写文章React Native 九宫格抽奖人人贷大前端技术中心人人贷大前端团队5 人赞同了该文章本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘，先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布局布局很简单，我们可以采用flex 3行布局，也可以单行、配合flex-wrap子控件自动折行实现。直接上代码 const LotteryStyle = StyleSheet.create({container: {flexDirection: 'row',flexWrap: 'wrap',justifyContent: 'center',}});const img_width = 100; // 图片的宽度const img_height ...
912 天前 / 闲鱼技术
嗯。。。这个问题十分不好回答啊(捋下鱼须)。闲鱼作为flutter领域的先驱者，以及fish_redux、flutter_boost等当红flutter库的作者，当然是欢迎广大的开发者多多使用flutter相关技术栈 逃~:)。咳咳，不过呢，我们还是正经得聊一下React Native(下面简称RN)和flutter之前的异同： 0x00 简单介绍一下React NativeReact Native是Facebook开源的一款基于react思想、使用JS、能够给移动平台带来native般体验的框架，官网最新的版本是0.5.9。