react

React Native热更新(iOS)-Pushy

帅比萌擦擦* 提交于 2020-03-21 16:55:02
React Native 的出现,使的开发 iOS 代码出现了更便捷的方式。由于 RN 是使用脚本语言编写的,实现了“解释执行”的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程序,热更新的方式极大的方便了迭代开发。 今天我们选择的热更新组件是 Pushy ,这是国内开发的,功能类似 CodePush ( CodePush 在国内访问及其慢,长城宽度根本无法访问), Pushy 支持增量更新,最大化的降低更新的数据量,节约流量。 下面介绍如何利用Pushy进行热更新: 1. 创建react native工程 $react-native init PushyDemo 2. 安装update工具, Pushy热更新需要update配合使用 RN 0.29+ $npm install -g react-native-update-cli RN 0.28及以下 $npm install -g react-native-update-cli rnpm 3. 在PushyDemo目录下添加Pushy组件并自动link RN 0.29+ $ npm install --save react-native-update $ react-native link react-native-update RN 0.27-0.28 $ npm install --save react

Webpack打包进阶

寵の児 提交于 2020-03-21 12:59:28
说在前面 由于使用了React直出,页面各项性能指标使人悦目。本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码分包、异步模块加载特性。看看它们又是如何对PC部落的性能起到进一步的催化作用。 为什么要使用webpack 如果你曾经使用过 Broserify, RequireJS 或类似的打包工具,并注重:代码分包、异步加载、静态资源打包(图片/CSS)。那么 webpack 就是帮你构建项目的利器!简单一句话:在webpack中,所有资源都被当作是模块,js可以引用 css , css 中可以嵌入图片 dataUrl。 webpack特性 对应不同文件类型的资源,webpack有对应的模块 loader ,比如对于 less, 使用的是 less-loader ,你可以在这里找到 所有loader . webpack 具有requireJS 和 browserify 的功能,但仍有自己的新特性: 1、对 CommonJS、AMD、ES6的语法做了兼容; 2、对js、css、图片等资源文件都支持打包; 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性,例如对 coffeeScript、ES6的支持; 4、有独立的配置文件 webpack.config.js; 5、可以将代码切割成不同

react native 生成APK

≡放荡痞女 提交于 2020-03-21 10:18:57
参考地址: React native Android 命令 打包apk 首先:尝试使用模拟器测试 这里是因为需要确认目前在电脑上的模拟器是可以正常运行的,并且,开发React native的应用程序,肯定是需要做一些本地测试的 第一:生成签名密钥 这一步的操作主要是生成需要的签名密钥,供android调用,生成的文件待用 在项目根目录运行以下命令,输入的密码是比较简单的1234567890 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 第二:设置gradle 分两步: 第一步:配置全局的gradle变量 打开C:\Users\chenwes\应该是可以看到一个文件夹 .gradle ,打开后,应该也有一个文件 gradle.properties ,如果不存在该文件,可以手动创建,并在该文件中输入以下内容 TEST_RELEASE_STORE_FILE=my-release-key.keystore TEST_RELEASE_KEY_ALIAS=my-key-alias TEST_RELEASE_STORE_PASSWORD=1234567890 TEST_RELEASE_KEY_PASSWORD

如何利用Android Studio打包React Native APK

心已入冬 提交于 2020-03-21 10:18:46
ok!百度出来的东西很杂,所以,这里介绍一种最简单,最合适我们(新手,应该是吧)的APK的打包方式! 当然!这种打包是基于Android Studio的,所以,注意喽!!!! 废话不多说开始吧! 首先,我们要整理我们的思路,第一步是给APK签名~第二步是完成打包 第一步:签名 打开Android Studio 然后在菜单栏的Build——>Generate Signed APK 在打开的界面点击Next,会弹出下面的界面 然后点击create new在弹出的界面中选择填写秘钥存放的位置,名称,密码。同样还要写别名的名字,证书的所有者,国家,组织以及城市相关信息。 注释:我们这里app的名称是jd,别名是jd_alias, 名称的密码和别名的密码都一样 点击OK,会默认填写上创建好的签名的信息, 最后点击finish会生成签名秘钥 第二部: 通过以上几步就已经将APP的签名完成了!下面开始真正的打包了哦! 1.Gradle配置: 1.首先我们要把刚刚生成的签名文件复制到项目android/app文件夹下面(你的xxx.jks文件路径可能和我不同,但是没关系复制到这个andrid/app路径下就可以) 然后进行修改项目中gradle.properties文件,进行添加如下的代码(注意下面的签名和别名的名称和上一步放入的test.jks要一样,下面两项分别填写签名和别名的密码)

【React Native开发】React Native进行签名打包成Apk

為{幸葍}努か 提交于 2020-03-21 10:18:15
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50525976 本文出自: 【江清清的博客】 ( 一 ) 前言 【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏: http://www.lcode.org 前几节课程我们对于 React Native 的一些基础配置 , 开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是 React Native 项目签名打包。 刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群! 欢迎各位大牛 , React Native 技术爱好者加入交流 ! 同时博客左侧欢迎微信扫描关注订阅号 , 移动技术干货 , 精彩文章技术推送 ! 在我们的 React Native F or Android 应用开发完成之后,那么就需要进行发布上传应用市场了,在上传之后,那么有一个很重要的步骤就是签名打包。下面我们来详细看一下怎么样进行签名打包 React Native 应用。具体关于Android的签名文件生成 ( 点击进入-注意翻墙 ) ( 二 ) Android 签名文件生成 上面有一个

三年前端面试经验加感悟

这一生的挚爱 提交于 2020-03-21 01:44:16
3 月,跳不动了?>>> 19年年底的时候从工作了两年半的公司离职,用了半个月的时看面试题及刷算法,半个月后开始投递简历,分别投了阿里、百度、快手和字节跳动,除了阿里一面匆匆忙忙电话面试把我咔掉了之外,其他三家,百度、快手和字节跳动的offer全都拿到,最终选择了字节跳动 三家面试,都是三轮技术面加一轮hr面,实际上,无论是哪家的面试,问的东西都是很相似的,都可以在网上搜到答案,都一定存在于某篇面试题汇总文章内,因为技术就是那个技术,就算是问出花来,本质或原理还是一样的,想看详细的真实面试题,掘金、牛客网、知乎都有很多,随便找下都看不完 授人以鱼不如授人以渔,这篇文章还有其他我觉得更值得分享的东西,所以为了避免篇幅过长,我就不详细一一列举我在这些公司中都碰到过什么题目了,每家各提两句我印象比较深刻的 百度 百度是我被阿里咔了之后面试的第一家公司,年前北京还是可以现场面试的,所以我也是去百度现场面 一面问的基本上都是基本功了,值得一提的是,百度是三家中唯一一个问我 CSS 问题的,大概就是面试官现场从他正在做的业务中拿了一个布局场景,让我写样式做好布局(不是圣杯布局或者双飞翼布局之类的),主要考察对 CSS 的灵活运用,需要稍微动点脑筋 二面也问了一点基础,主要还是考察了一些场景解决方案或设计方案,算法的话,就问了一个原理是二叉树后序遍历的题目,比较简单,没费什么事就做出来了

直播回顾·程序媛的成长蜕变

跟風遠走 提交于 2020-03-21 01:28:13
3 月,跳不动了?>>> 在平平淡淡的工作中,突然要准备一个直播分享,犹如平地一声雷。预知雷声大不大,请看下文&视频完整版: B站回播地址 、 牛客网录播地址 。 本次分享由 腾讯犀牛鸟「云开发」校园技术布道师养成计划 邀请,为年轻程序员解答,如何进入学习提升自己、如何找到最适合自己的技术路线以及如何才能在毕业后进入大厂等问题。 本文从两个模块展开,首先分享从小白时期成长为高级工程师的成长历程,然后探讨程序员应该从哪些方面着手,提升自身的技术实力。 一、成长历程分享 我的成长历程大致分为 3 个阶段,重构开发阶段、前端开发阶段,然后到全栈开发。 重构开发 2015 年处于重构开发阶段。 当时作为一个硬件转软件的大三实习生,实习工作前只学习了一个月前端相关的知识,基础薄弱,一开始每天的工作就是 HTML + CSS 写静态页面,或者就是直接扒网站,改改样式和文案。在项目前后端分离后,才开始做动画和交互的开发工作。 前端开发 2016 - 2018 处于前端开发阶段。 2016 年是特别好找工作的一年,投简历有大把的面试,会 HTML + CSS + jQuery + 有项目经验就可以当一个初级的前端开发。在日常工作之余,每周会定一些任务看哪本书,看哪个技术的文档,也开始写技术博客。在工作中,参与开发公司的官网系统,在这个项目的参与过程中,前端构建工具 fis3、css 预编译工具

styled-components的基本使用

匆匆过客 提交于 2020-03-20 23:10:55
一、官网地址   https://www.styled-components.com/ 二、styled-components   1、styled-components 样式化组件,主要作用是它可以编写实际的CSS代码来设计组件样式,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件,   并且可以附加样式给当前组件。 优化react组件   2、在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流   3、使用styled-components不需要再使用className属性来控制样式,而是将样式写成更具语义化的组件的形式   4、使用style-components会随机生成一个class名称,这样不会污染到全局变量,当然因为随机生成,维护会增加难度 三、基本使用   1、安装   cnpm i styled-components -S || yarn add styled-components   2、引入   import styled from "styled-components";   3、使用 export const Header = styled.div` width:100%; height:1rem; background:red `import {Header}

ant design 在react中的按需加载

只谈情不闲聊 提交于 2020-03-20 16:47:10
先看官网介绍: https://ant.design/docs/react/introduce-cn 根据说明新建文件.babelrc (babel的配置文件) 运行项目,看是否成功。 如果报错有多个babel配置文件,可以查看package.json文件中是否有package.json文件中是否babel配置 可复制这里: "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] 删除掉.babelrc 文件即可了。 来源: https://www.cnblogs.com/taohuaya/p/12531731.html