-
ReactNative修改第三方插件源码
2017-03-13 10:21:21当第三方插件源码修改后,必须重启服务. 猜测,第三方插件在服务启动时会生成缓存. 如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的 注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,...当第三方插件源码修改后,必须重启服务.猜测,第三方插件在服务启动时会生成缓存.如果不重启无论如何修改代码,都不会产生影响——这个是经过测试的注意是重启服务,不是简单的cmd+R 刷新,也不是关闭应用重新打开,也不是点击XCode的按钮执行重新安装.必须npm start 或者react-native run-ios 或者关闭终端后在XCode中点击按钮重新安装 -
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
2017-08-02 16:02:001.5 小试牛刀——更改React Native项目源码 应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧。 打开index.ios.js文件,可以看到与...1.5 小试牛刀——更改React Native项目源码
应用虽然已经运行起来了,但是到现在还没有看到或修改任何代码,读者是不是觉得意犹未尽呢?下面就来看看React Native项目的源码吧。
打开index.ios.js文件,可以看到与显示在设备上内容直接相关的代码:01 export default class ch02 extends Component { // 每个页面可以理解成一个组件
02 render() { // 渲染页面的函数
03 return (
04 // 页面根View
05
06 Welcome to React Native!
07
08
09 To get started, edit index.ios.js
10
11
12 Press Cmd+R to reload,{'n'}
13 Cmd+D or shake for dev menu
14
15
16 );
17 }
16 }为了证实我们的想法,将代码中的文本内容从“Welcome to React Native!”修改为“我的第一个React Native应用!”,然后在iOS模拟器中使用快捷键command + R重新加载应用,果然界面更新了!如图1.25所示。
图1.25 修改文本内容后的效果
?提示:如果已经打开了Enable Live Reload调试选项,就不需要手动重新加载应用了,修改完代码直接可以看到效果。
接着,再来看看显示样式的代码:01 const styles = StyleSheet.create({
02 container: { // 页面根View的样式
03 flex: 1,
04 justifyContent: 'center',
05 alignItems: 'center',
06 backgroundColor: '#F5FCFF'
07 },
08 welcome: { // “欢迎”文本的样式
09 fontSize: 20,
10 textAlign: 'center',
12 margin: 10
12 },
13 instructions: { // “说明”文本的样式
14 textAlign: 'center',
15 color: '#333333',
16 marginBottom: 5
17 }
18 });在welcome样式中添加color: 'red'属性:
01 welcome: {
02 fontSize: 20,
03 textAlign: 'center',
04 margin: 10,
05 color: 'red' // 也可以用RGB值'#FF0000'来表示红色
06 },
?注意:第一次编写React Native代码时很容易发生遗漏逗号“,”等拼写错误。
重新加载应用后,效果如图1.26所示。
以上是iOS App的运行效果,同样也可以对index.android.js文件做类似的修改,重新加载Android App效果如图1.27所示。 图1.26 修改文字颜色后效果 图1.27 Android App运行的效果
?提示:实际开发中,index.io.js和index.android.js往往复用相同的逻辑,即将相同的代码提取到公共文件中,这样就可以大大发挥React Native的跨平台优势。
-
修改react native的安卓源码的终极方案!
2020-05-11 12:43:27如果按官方指导走来修改安卓源码然后从源码编译,可以要人老命,各种环境配置,麻烦程度堪称杀人利器。 本文将另辟稀径,解决这一麻烦。 一、新建一个java工程,最好是maven项目,然后将项目下面的node_modules/...如果按官方指导走来修改安卓源码然后从源码编译,可以要人老命,各种环境配置,麻烦程度堪称杀人利器。
本文将另辟稀径,解决这一麻烦。
一、新建一个java工程,最好是maven项目,然后将自己react native项目下面的node_modules/react-native/ReactAndroid/src/main/java里面的java源码复制到新的工程;
二、从自己react native项目下面的node_modules\react-native\android\com\facebook\react\react-native\0.60.5\react-native-0.60.5.pom里,将maven依赖复制到新的工程里面的pom.xml中。然后对依赖要作如下的调整:
1.有些依赖是位于google仓库的,是访问不了的,可以下载下来通过本地的方式添加到构建目录,如android相关的一些依赖;
2.有些依赖是aar格式,不再是传统的jar了,要特别注意;
三、按需要修改源码;
四、将修改过的类的编译过的字节码通过7-zip工具拖入到自己react native项目下面的node_modules/react-native/android/com/facebook/react/react-native/0.60.5/react-native-0.60.5.aar文件里面的classes.jar中的对应位置即可;
-
react-native-qiniu源码修改(实现文件上传,上传策略等)
2017-12-11 19:25:39react-native 对七牛的扩展支持问题: react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在...react-native 对七牛的扩展支持
问题:
react-native-qiniu 已经废弃好久了,没有人写,网上找到的也只能解决一点点问题,然后图片上传也存在着一系列的问题.参考着网上一些代码,我修改了其文件上传的部分.虽然可以在服务端进行上传,但总觉得base64先上传到服务器,再通过服务器上传到网站的话,在图片很多的情况下会影响一些性能,而且也不是很方便修改后:
- 可以上传文件,自定义参数上传,在上传成功后可以正确获取到参数信息, token会正确生成
- 可以指定上传策略 如:returnbody等
- 错误时可以收到错误信息
- 增加进度显示,可以获取上传文件的进度
- 添加了回调函数,可以监听xmlhttprequest的readystate(没什么用)
注: - 原七牛网址:https://github.com/qiniudemo/react-native-sdk
使用步骤:
- 下载原react-native-qiniu npm i react-native-qiniu --save
- 替换目录里的两个文件rpc.js和auth.js
- 使用修改后API进行上传
如果是和我一样不知道如何使用七牛上传的小白可以参看以下官方文档:
- 上传策略部分: https://developer.qiniu.com/kodo/manual/1206/put-policy
- 直传文件部分:https://developer.qiniu.com/kodo/api/1312/upload
(react native实际上是使用formData 模拟表单来进行文件的上传)
如有其他问题欢迎留言,互相讨论进步
修改的代码部分
rpc.js
主要修改部分:- uploadFile函数重构
- 添加回调
- 处理promise
import conf from './conf.js'; import Auth from './auth'; //发送管理和fop命令,总之就是不上传文件 function post(uri, adminToken, content) { var headers = { 'Content-Type': 'application/x-www-form-urlencoded', }; let payload = { headers: headers, method: 'POST', dataType: 'json', timeout: conf.RPC_TIMEOUT, }; if (typeof content === 'undefined') { payload.headers['Content-Length'] = 0; } else { //carry data payload.body = content; } if (adminToken) { headers['Authorization'] = adminToken; } return fetch(uri, payload); } /** * 直传文件 * formInput对象如何配置请参考七牛官方文档“直传文件”一节 */ function uploadFile(dataParams, policy, callbackUpDate = function () { }, callBackMethod = function () { }) { let params = getParams(dataParams, policy); let uri = params.uri; let data = params.data; let oloaded = null; let responseObj = {}; return new Promise((resolve, reject) => { if (typeof uri != 'string' || uri == '' || typeof data.key == 'undefined') { reject && reject(null); return; } if (uri[0] == '/') { uri = "file://" + uri; } //创建xhr并open var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { responseObj.readyState = xhr.readyState; //状态0-4 responseObj.data = xhr.response;//返回值 responseObj.textData = xhr.responseText; //返回值Text responseObj.status = xhr.status; //状态码 // responseObj.message = "" switch (xhr.readyState) { case 0: callBackMethod(responseObj) break; case 1: callBackMethod(responseObj) break; case 2: callBackMethod(responseObj) break; case 3: callBackMethod(responseObj) break; case 4: if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { if (xhr.status == 200) { callBackMethod(responseObj) } } else { callBackMethod(responseObj) } break; } }; xhr.open('POST', conf.UP_HOST); xhr.onload = () => { if (xhr.status !== 200) { reject && reject(responseObj); return; } resolve && resolve(JSON.parse(responseObj.data)); }; xhr.onerror = (evt) => { reject && reject(evt); return; }; //请求失败 xhr.upload.onloadstart = () => {//上传开始执行方法 oloaded = 0;//设置上传开始时,以上传的文件大小为0 console("上传开始") }; xhr.upload.onprogress = (evt) => { oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算 callbackUpDate(Math.round(oloaded / evt.total * 100), oloaded, evt.total) }; xhr.upload.onloadend = (evt) => { console("上传结束") }; let formdata = creatFormData(params); xhr.send(formdata); }); } //构造上传参数 function getParams(data, policy) { let putPolicy = new Auth.Policy( policy ); let uptoken = putPolicy.token(); data.token = uptoken; let params = {}; params.uri = data.uri; delete data.uri; params.data = data; return params; } /** * 创建一个表单对象,用于上传参数 * @param {*} params */ function creatFormData(params) { let formdata = new FormData(); let uri = params.uri; let formInput = creatFormInput(uri); let data = params.data; console.log(data) for (let key of Object.keys(data)) { let value = data[key]; if (key.charAt(0) === "_") { formdata.append("x:" + key.substring(1, key.length), value); } else { formdata.append(key, value); } } formdata.append("file", { uri: uri, type: formInput.type, name: formInput.name }); console.log(formdata) return formdata; } /** * 构造表单对象中file对象 * @param {*} params */ function creatFormInput(uri) { let formInput = {}; if (typeof formInput.type == 'undefined') formInput.type = 'application/octet-stream'; if (typeof formInput.name == 'undefined') { var filePath = uri.split("/"); if (filePath.length > 0) formInput.name = filePath[filePath.length - 1]; else formInput.name = ""; } return formInput; } export default { uploadFile, post }
auth.js
主要修改部分:
- PutPolicy类重构为Policy类
- 修改构造JSON字符串算法 _parse2Str()
import base64 from 'base-64'; import CryptoJS from "crypto-js"; import conf from "./conf.js"; import parse from 'url-parse'; function urlsafeBase64Encode(jsonFlags) { var encoded = base64.encode(jsonFlags); return base64ToUrlSafe(encoded); }; function base64ToUrlSafe(v) { return v.replace(/\//g, '_').replace(/\+/g, '-'); }; function hmacSha1(encodedFlags, secretKey) { var encoded = CryptoJS.HmacSHA1(encodedFlags, secretKey).toString(CryptoJS.enc.Base64); return encoded; }; function generateAccessToken(url, body) { var u = parse(url, true); var path = u.pathname; var access = path + '\n'; if (body) { access += body; } var digest = hmacSha1(access, conf.SECRET_KEY); var safeDigest = base64ToUrlSafe(digest); let token = 'QBox ' + conf.ACCESS_KEY + ':' + safeDigest; //console.log(token); return token; }; class Policy { constructor(policy) { if (typeof (policy) == "undefined") { } else { this.policy = policy; if (typeof (policy.deadline) == "undefined" || policy.deadline == null) { this.policy.deadline = 3600 + Math.floor(Date.now() / 1000); } } } _parse2Str(putPolicy) { let str = "{"; let keys = Object.keys(putPolicy); keys.forEach((key, i) => { let value = putPolicy[key]; if (typeof (value) == "object") { str = `${str}"${key}":` str = `${str}"{` Object.keys(value).forEach((key2) => { let value2 = value[key2]; let re = /(\$\(.*?\))/g; if(re.test(value2)){ str = `${str}\\\"${key2}\\\":${value2},` }else{ str = `${str}\\\"${key2}\\\":"${value2}",` } }) console.log(keys.length + "::" + i) if (i >= keys.length) { str = `${str.substring(0, str.length - 1)}}"` }else{ str = `${str.substring(0, str.length - 1)}}",` } } else if (typeof (value) == "number") { str = `${str}"${key}":${value},` } else if (typeof (value) == "string") { str = `${str}"${key}":"${value}",` } else { str = `${str}"${key}":"${value}",` } }) str = `${str.substring(0, str.length - 1)}}`; return str; } // _creatStr = (policy) => { // policy['deadline'] = this.expires + Math.floor(Date.now() / 1000); // let policyStr = JSON.stringify(policy); // let re = /(\"\$\(.*?\)\")/g; // let newStr = policyStr.replace(re, (value) => { // return value.substring(1, value.length - 1); // }) // return newStr; // } token = () => { policStr = this._parse2Str(this.policy); console.log("policStr", policStr); var encodedPutPolicy = this._urlsafeBase64Encode(policStr); console.log("encodedPutPolicy", encodedPutPolicy); var sign = this._hmacSha1(encodedPutPolicy, conf.SECRET_KEY); var encodedSign = this._base64ToUrlSafe(sign); console.log("encodedSign", encodedSign); var uploadToken = conf.ACCESS_KEY + ':' + encodedSign + ':' + encodedPutPolicy; console.log("uploadToken", uploadToken); return uploadToken; } _urlsafeBase64Encode = (jsonFlags) => { var encoded = base64.encode(jsonFlags); return base64ToUrlSafe(encoded); }; _base64ToUrlSafe = (v) => { return v.replace(/\//g, '_').replace(/\+/g, '-'); }; _hmacSha1 = (encodedFlags, secretKey) => { var encoded = CryptoJS.HmacSHA1(encodedFlags, secretKey).toString(CryptoJS.enc.Base64); return encoded; }; } class GetPolicy { constructor(expires) { this.expires = expires || 3600; } makeRequest(baseUrl) { var deadline = this.expires + Math.floor(Date.now() / 1000); if (baseUrl.indexOf('?') >= 0) { baseUrl += '&e='; } else { baseUrl += '?e='; } baseUrl += deadline; var signature = hmacSha1(baseUrl, conf.SECRET_KEY); var encodedSign = base64ToUrlSafe(signature); var downloadToken = conf.ACCESS_KEY + ':' + encodedSign; return baseUrl + '&token=' + downloadToken; } } export default { urlsafeBase64Encode, generateAccessToken, Policy, GetPolicy }
使用方法部分
- 自定义参数使用 _ 开头
- 值全部为字符串形式,如"${fname}"
import Qiniu, { Auth, ImgOps, Conf, Rs, Rpc } from 'react-native-qiniu';//添加七牛引用 Conf.ACCESS_KEY = "xxx"; Conf.SECRET_KEY = "xxx"; Conf.UP_HOST = "http://up-z2.qiniu.com"//设置公钥 密钥 和你服务器所在的HOST 这里可以通过服务器获取 ... //上传方法 upload = () => { //上传参数 let params = { uri: this.state.imageUrl,//图片路径 可以通过第三方工具 如:ImageCropPicker等获取本地图片路径 key: "tesst",//要上传的key _aa: "aa", //自定义参数, _bb: "bb", } //构建上传策略 let policy = { scope: "niangao-sos:tesst",//记得这里如果格式为<bucket>:<key>形式的话,key要与params里的key保持一致,详见七牛上传策略 returnBody://returnBody 详见上传策略 { name: "$(fname)",//获取文件名 size: "$(fsize)",//获取文件大小 w: "$(imageInfo.width)",//... h: "$(imageInfo.height)",//... hash: "$(etag)",//... _bb: "$(x:bb)"//获取自定义参数 }, } //进行文件上传 Rpc.uploadFile(params, policy).then((data) => { console.log(data);//打印上传成功后参数 /* 格式如下 { "name": "IMG_20171124_193927_HDR-compressed.jpg", "size": 29941, "w": 260, "h": 195, "hash": "FndeZ_b_ZvlsE-3aS5U6yTTR6BZn", "_bb": "bb" } */ }).catch((err) => { console.log(err) /* 格式如下 { "readyState": 4, "data": "{\"error\":\"key doesn't match with scope\"}", "textData": "{\"error\":\"key doesn't match with scope\"}", "status": 403 } */ }); }
-
React Native学习之StackNavigator 标题源码修改
2017-11-23 11:36:00StackNavigator,相信大家都用过不多说,我是小米测试机,用的时候发现在有返回图标的时候,标题设置了居中,依然会向右便宜,解决方法如下图: 注释Header.js这段代码,这里left , right 始终应该为0,不管有... -
react-native react-native-modal-dropdown级联扩展
2018-01-22 17:39:20react-native没有提供...在源码基础上做了一些修改。 react-native-modal-dropdown版本为0.6.0 级联出现异常现象的原因为,defaultValue和buttonText的配合没有加入级联的逻辑,导致无法级联显示不正常 新增but -
React Native调试源码分析——HMR
2019-04-16 15:00:171、前言 上次的远程加载简单描述了app reload(开发时运行也是一个逻辑)和MetroServer...它能让你在修改代码后马上在app上展现结果而且不会丢失状态。 2、HMR通讯方式 先看其创建的位置,也是在runServer中 ... -
react-native-tag-select修改源码的代码.rar
2020-10-24 14:15:36react-native-tag-select修改源码的代码,标签选中取消状态,用过该标签的大概知道是什么用法,会用文档介绍一个例子 -
ReactNative: 编译源码项目
2019-08-11 12:22:24有的时候我们需要通过修改源码来完成某些业务需求,并上传maven仓库,以便项目的引用,这样就需要成功编译源码。 首先克隆react-native项目到本地,下载地址https://github.com/facebook/react-native 我使用的... -
解决react-native 每次修改完源码后,其他同事无法用,重新npm install无法用的问题
2019-12-03 15:39:59react-native 修改完源码后,如何让其他同事直接能用,每次都发过去修改的node源文件肯定是不方便的,这里分享个脚本 其实我们需要达成的目的是修改NodaModule l的源码其他人也在,但是NodaModule 文件肯定是忽略的... -
React native react-native-scrollable-tab-view ScrollableTab 默认不显示指示器问题
2018-04-16 11:04:34在初始化过后可能会出现此问题,解决方案参考一位 GitHub 的 Issues需要修改ScrollableTabBar源码: 将this.updateView({value: this.props.scrollValue._value, }); 替换为: this.updateView({value: this.... -
React Native之react-navigation动态修改标题、页面导航等
2019-06-16 20:55:10目录 1.navigation导航对象相关参数 ...1.2.3源码 1.3params 1.4navigation的state属性 2.动态修改标题-title或者左右显示组件-headerRight 2.1动态修改标题 2.2动态修改左右显示组件-headerRi... -
React源码分析-渲染篇
2018-04-14 16:07:30ReactJS和React-Native的区别 React是由Facebook推出的一个JavaScript框架,主要用于前端开发。 React采用组件化的方式简化web开发 1.DOM:每个HTML页面可以看作为一个DOM 2.原生的web开发的方式。HTML一个... -
《React Native跨平台移动应用开发》源码
2017-02-10 20:01:11去年拿到书后很快就看完了,然后书就一直放着。...主要涉及两部分:native和React Native通信,封装native UI组件 源码: native和React Native通信:https://github.com/xuechinahb/react-native-exampl -
React Native清除缓存库react-native-http-cache使用
2018-11-06 15:06:181.react-native-http-cache:https://github.com/reactnativecn/react-native-http-cache 2.针对android的问题进行修改 按照文档安装之后,android会报方法getMainDiskStorageCache()找不到问题 解决办法: 改源码,... -
React Native 性能优化指南
2020-12-16 15:18:01React Native 性能优化指南 卤代烃 公号@卤蛋实验室,关注就能变强...本文谈到的 React Native 性能优化,还没到修改 React Native 源码那种地步,所以通用性很强,对大部分 RN 开发者来说都用得着。 本文的内容.. -
React Native Android Gradle 编译流程浅析
2016-11-11 18:54:58了解 React Native 的编译流程是进行 React Native 裁剪阉割的首要任务,理解编译流程才能去看如何依赖、如何裁剪,这和 Android 源码一样,你想修改的前提是熟悉整个 Android 系统源码 build 目录下的 各种 shell、... -
React Native WebView 实现滑动监听
2018-02-28 18:10:09React Native 的 WebView控件默认是没有滚动监听的,实战开发中有可能会遇到监听webview滚动距离的需求,我们可以通过修改源码来实现。 (1)iOS端实现方式 (2)Android端实现方式... -
React Native未来导航者:react-navigation 使用详解(进阶篇)
2018-03-06 17:44:25欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。 本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看: React Native未来导航者:react-...所以需要我们修改源码,... -
《ReactNative》之react-native-image-crop-picker保存图片到应用内部
2018-06-02 10:23:42在使用react-native-image-crop-picker(版本0.20.0)组件选择图片的时候,我希望将选取的图片保存到应用内部。但是在ios端,选取的图片被保存在临时目录中,大约3天左右会被自动删除。在android端,选取的图片没有往... -
react native navigation 隐藏 bottomTab
2019-12-22 01:54:25react native navigation 隐藏 bottomTab 前言 在做 react-native app 时, 用到了 react navigation 的 bottom tab ...试了很多中方法,最后比较简单的方式是修改nodeModels里面的源码。 本文 react-native 版本... -
react-native运行之缓存问题
2018-09-11 15:57:36问题描述:今天在做一个项目详情的时候,需要对react-native的组件源码进行修改。但是该node-modules里面的文件会有一个致命的问题:每次重装依赖(使用yarn install 或者 npm install)之后,node-modules里面的...
-
TypeScript基础(二) -- 接口
-
cppreference_zh_jb51.zip
-
【数据分析-随到随学】数据可视化
-
【P9】Point to the Expression:Solving Algebraic Word Problems using the Expression-Pointer Transformer
-
PW2163D.pdf
-
MODBUS协议中文版(PDF版).zip
-
java rabbitMq 图解+使用记录
-
用数据可视化工具做报表,能好懂到什么程度?
-
【数据分析-随到随学】Spark理论及实战
-
ProBuilder快速原型开发技术
-
three.js入门速成
-
如何依赖spring-kafka获取当前偏移量、最高日志位移、消息堆积量
-
电子海图——s57.RAR
-
第3章 入门程序、常量、变量
-
数字货币即将面世 蹭“数字货币”热度套路频现
-
村长叫你领书过年,送3本Python好书
-
BK9520_Layout参考_RX.pdf
-
js数组对象排序
-
计算机网络基础
-
【数据分析-随到随学】机器学习模型及应用